CSS에서 두 개의 배경 이미지를 동시에 삽입하는 방법

여러 배경 이미지를 사용하는 경우 먼저 background-image 속성 값을 쉼표로 구분하고 사용할 이미지를 나열한 다음 background-repeat를 사용하여 반복 속성을 정의하고 마지막으로 background-position을 사용하여 위치를 정의합니다. 각 작은 이미지의 수.

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

여러 배경 이미지를 사용하는 경우 background-image 속성 값을 쉼표로 구분하고 사용하려는 이미지를 나열한 다음 background-repeat를 사용하여 반복 속성을 정의하고 마지막으로 background-position을 사용하여 정의하면 됩니다. 각 작은 이미지의 위치.

HTML 코드:

<div></div>

CSS 코드:

background-image: url(images/scroll_top.jpg),
                  url(images/scroll_bottom.jpg),
                  url(images/scroll_middle.jpg);
 
background-repeat: no-repeat, no-repeat, repeat-y;
 
background-position: center top, center bottom, center top;

scroll_top.jpg

scroll_middle.jpg

scroll_bottom.jpg

여러 개를 정의하려면 background-repeat 및 background-position을 사용하세요. 값에서 정의된 순서는 배경 이미지의 순서에 해당합니다.

약어:

위에 정의된 방식은 특히 나중에 다시 입력하거나 유지 관리해야 하는 경우 혼란스러울 수 있습니다. 따라서 많은 웹 디자이너는 여러 배경 이미지를 지정하기 위해 약어를 사용하는 것을 좋아합니다.

CSS 코드:

background: url(images/scroll_top.jpg) center top no-repeat,
            url(images/scroll_bottom.jpg) center bottom no-repeat,
            url(images/scroll_middle.jpg) center top repeat-y;

이미지를 URL로 정의할 때마다 이미지의 위치와 반복 방식이 정의됩니다.

핵심 포인트:

Photoshop의 레이어처럼 여러 배경 이미지가 차곡차곡 쌓입니다. 배경 이미지가 나열되는 순서에 따라 맨 위에 표시되는 이미지가 결정됩니다. 나열된 첫 번째 이미지는 최상위 수준에 있고, 두 번째 이미지는 두 번째 수준에 있으며, 마지막 이미지는 맨 아래 수준에 있습니다. 이전 코드를 예로 들면 스크롤의 위쪽 부분(scrollTop.jpg)은 스크롤 아래쪽(scrollBottom.jpg) 위에 있고 아래쪽은 스크롤 중앙(scrollMiddle.jpg) 위에 있습니다.

위 내용은 CSS에서 두 개의 배경 이미지를 동시에 삽입하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!