CSS3 예제 공유를 통한 다중 배경 구현(다중 배경)_CSS/HTML

CSS3의 탄생으로 이 문제가 해결되었습니다. CSS3에서는 background-image 또는 background를 통해 컨테이너에 여러 배경 이미지를 설정할 수 있습니다. 즉, 서로 다른 배경 이미지를 하나의 블록 요소에만 배치할 수 있습니다.

먼저 문법을 살펴보겠습니다.

배경: [배경-원본] | [배경-반복] | [배경-부착] | 🎜>

여러 배경 이미지의 URL을 구분하려면 쉼표를 사용하세요. 배경 이미지가 여러 개 있고 다른 속성이 하나만 있는 경우(예: 배경 반복이 하나만 있는 경우) 이 속성 값은 모든 배경에 적용됩니다. 이미지.

예를 살펴보겠습니다.

여기에서는 5장의 사진을 div 컨테이너의 배경으로 사용하겠습니다. 코드를 살펴보겠습니다.

HTML 코드:

코드 복사 코드는 다음과 같습니다.

스크립트 하우스

CSS 코드:

코드 복사 코드는 다음과 같습니다.

.div1{
margin:50px 자동;
너비:700px;
높이:450px;
테두리:10px 점선 #ff00ff;

배경 이미지:url(images/1.jpg),url(images/2 .jpg) ,url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);
background-repeat:no-repeat,no-repeat,no-repeat, 반복 없음, 반복 없음;
배경 위치:왼쪽 위,오른쪽 위,왼쪽 아래,오른쪽 아래,가운데 가운데;
}

효과는 다음과 같습니다.

위 코드에는 다음 문장이 있습니다.

코드 복사 코드는 다음과 같습니다.

Background-repeat:no-repeat;

값만 써도 효과는 똑같습니다.

물론 위의 배경 이미지의 다양한 속성을 설정할 때 별도로 작성하기 때문에 배경 이미지의 다양한 속성을 함께 작성할 수도 있습니다. 이 경우 CSS 코드는 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

.div1{
...
배경:url(images/1.jpg) 왼쪽 상단 반복 없음,
url(images/2.jpg) 오른쪽 상단 반복 없음,
url(images/3.jpg) 반복 없음 왼쪽 아래,
url(images/4.jpg) 오른쪽 아래 반복 없음,
url(images/5.jpg) 반복 없음 중앙 center;
...
}

아, CSS3 다중 배경이 작동하는 방식은 매우 간단합니다. 참조로 사용할 수 있는 전체 소스 코드와 예제가 아래에 제공됩니다.