CSS3 다중 배경

CSS3 다중 배경

CSS3를 사용하면 background-image속성을 통해 요소에 대한 여러 배경 이미지를 추가 할 수 있습니다 .

서로 다른 배경 이미지는 쉼표로 구분되며 이미지는 서로 위에 겹쳐서 표시됩니다. 첫 번째 이미지는 뷰어에 가장 가깝습니다.

다음 예제에는 두 개의 배경 이미지가 있습니다. 첫 번째 이미지는 꽃 (아래쪽 및 오른쪽으로 정렬 됨)이고 두 번째 이미지는 종이 배경 (왼쪽 위 모서리에 정렬 됨)입니다.

#example1 {
    background-image: url(img_flwr.gif), url(paper.gif);
    background-position: right bottom, left top;
    background-repeat: no-repeat, repeat;
} 

개별 배경 속성 (위와 같음) 또는 background속기 속성을 사용하여 여러 배경 이미지를 지정할 수 있습니다 .

다음 예제에서는 background속기 속성을 사용합니다 (위의 예와 같은 결과).

#example1 {
    background: url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top repeat;
}