CSS3 예제를 공유하여 다양한 배경 구현

모두가 배경 속성인 Background-image에 대해 잘 알고 있어야 합니다. CSS2의 관련 속성에는 Background-repeat(배경 반복 여부 및 반복 방법 설정), Background-position(배경 설정)이 있습니다. 컨테이너 내 이미지 위치), Background-attachment(배경이 페이지와 함께 스크롤되는지 여부 설정), 이러한 속성을 사용하여 배경 이미지가 컨테이너에 표시되는 방식을 제어할 수 있지만 컨테이너, 컨테이너의 배경으로 여러 이미지를 사용하려면 어떻게 해야 합니까? 컨테이너에 쓸모없는 요소를 추가하시겠습니까?

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

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

배경: [배경-이미지] | [배경-원산지] | [배경-반복] [배경 크기] | [ 배경 첨부] | [배경 위치]

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

예를 살펴보겠습니다.

여기서 5개의 그림을 p 컨테이너의 배경으로 사용하려고 합니다. 코드를 살펴보겠습니다.

HTML 코드:

코드는 다음과 같습니다.

< p class = "p1"
코드는 다음과 같습니다:

.p1{

margin:50px auto;

width:700px;

height:450px;
border:10px dashed #ff00ff;

배경 이미지:url(images/1.jpg),url(images/2.jpg),url(images/3.jpg),url(images/4.jpg),url(images/5.jpg);

background-repeat:반복 안 함,반복 안 함, 반복 안 함, 반복 안 함, 반복 안 함;

배경 위치: 왼쪽 위, 오른쪽 위, 왼쪽 아래, 오른쪽 아래, 가운데 가운데;
}


The 효과는 다음과 같습니다.

위 코드에는 다음 문장이 있습니다. 코드는 다음과 같습니다. 배경 반복 : no-repeat;

값만 쓰면 효과는 똑같습니다.

물론, 위에서 배경 이미지의 다양한 속성을 설정할 때 별도로 작성하기 때문에, 이때 배경 이미지의 다양한 속성을 함께 작성할 수도 있습니다.

코드는 다음과 같습니다:

.p1 {

...

background:url(images/1.jpg) no-repeat 왼쪽 상단,

url(images/2.jpg) no-repeat 오른쪽 상단,

url (images/3.jpg) no-repeat 하단 왼쪽, r url (images/4.jpg) no-repeat 하단 오른쪽,
url (images/5.jpg) no-repeat 중앙 중앙; . 참조로 사용할 수 있는 전체 소스 코드와 예제가 아래에 제공됩니다.

위 내용은 CSS3 예제를 공유하여 다양한 배경 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!