CSS3 배경(Background)

CSS를 사용하여3요소에 여러 배경을 적용할 수 있습니다.

CSS를 사용하여3배경

CSS3이 제공한 몇 가지 새로운 속성을 통해 요소의 배경을 조작할 수 있습니다. 예를 들어 배경 클립, 여러 배경, 배경 크기를 조정하는 옵션 등.

다음 절에서는 CSS3의 모든 새 배경 기능에 대해, 배경과 관련된 다른 속성에 대해 참조하십시오CSS 배경教程

CSS3 background-size 속성

이 background-size 속성은 배경 이미지의 크기를 지정하는 데 사용됩니다. CSS3그 전까지 배경 이미지의 크기는 이미지의 실제 크기에 의해 결정되었습니다. 배경 이미지의 크기는 픽셀 또는 퍼센트 값, 그리고 키워드 auto, contain, cover를 사용하여 지정할 수 있습니다. 음수 값을 사용할 수 없습니다.

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　background: url("images/sky.jpg) no-repeat;
　　　　background-size: contain;
　　　　border:　6px solid #333;
}

CSS3 background-clip 속성

background-clip 속성은 요소의 배경이 경계에 이르기까지 확장되는지 지정할 수 있습니다. 이 background-clip 속성은 세 가지 값을 취할 수 있습니다: border-box, padding-box, content-box。

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: orange;
　　　　background-clip: content-box;
}

참조하십시오CSS 컨테이너 모델튜토리얼을 통해 요소 박스에 대한更多信息를 이해할 수 있습니다.

CSS3 background-origin 속성

이 background-origin 속성은 배경 이미지의 위치 영역을 지정할 수 있습니다. 배경과 동일한 값을 가질 수 있습니다.-clip 속성: border-box, padding-box, content-box。

.box {
　　　　width:　250px;
　　　　height:　150px;
　　　　padding:　10px;
　　　　border:　6px dashed #333;
　　　　background: url("images/sky.jpg) no-repeat;
　　　　background-size: contain;
　　　　background-origin: content-box;
}

CSS3여러 배경

CSS3하나의 요소에 여러 배경을 추가할 수 있게 합니다. 배경은 서로 겹쳐집니다. 겹치는 수는background-image또는 background속성의 구분된 값의 개수는 간단한 속성의 값으로 결정됩니다.

.box {
　　　　width:　100%;
　　　　height:　500px;
　　　　background: url("images/birds.png) no-repeat center, url("images/clouds.png) no-repeat center, lightblue;
}

배경의 구분된 목록의 첫 번째 값（즉,background-image“birds.png”）는 상단에 표시되고, 마지막 값（즉, “lightblue” 색상）은 하단에 표시됩니다. 배경 중 마지막 배경만이 포함할 수 있습니다.background-color。