모든 사람은 배경 속성인 background-image에 대해 잘 알고 있어야 합니다. CSS2에서 관련 속성에는 background-repeat(배경 반복 여부 및 반복 방법 설정), background-position(컨테이너에 배경 이미지 설정)이 포함됩니다. ) 위치), 배경 첨부(배경이 페이지와 함께 스크롤되는지 여부 설정), 이러한 속성을 사용하여 배경 이미지가 컨테이너에 표시되는 방법을 제어하지만 컨테이너를 원하는 경우 컨테이너에 하나의 배경 이미지만 제공할 수 있습니다. 배경은 여러 장의 사진으로 구현되어 있는데 어떻게 하면 될까요? 컨테이너에 쓸모없는 요소를 추가하시겠습니까?
CSS3의 탄생으로 이 문제가 해결되었습니다. CSS3에서는 background-image 또는 background를 통해 컨테이너에 여러 배경 이미지를 설정할 수 있습니다. 즉, 서로 다른 배경 이미지를 컨테이너 내부에 하나만 배치할 수 있습니다. 블록 요소.
먼저 구문을 살펴보겠습니다.
background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
여러 배경 이미지의 URL을 구분하려면 쉼표를 사용하세요. 배경 이미지가 여러 개 있지만 다른 속성은 하나만 있는 경우(예: 단 하나의 배경 반복), 이 속성 값은 모든 배경 이미지에 적용됩니다.
위 약어는 다음 형식으로 나눌 수 있습니다.
background-image:url1,url2,...,urlN;
background-repeat : repeat1,repeat2,...,repeatN;
backround-position : position1,position2,...,positionN;
background-size : size1,size2,...,sizeN;
background-attachment : attachment1,attachment2,...,attachmentN;
background-clip : clip1,clip2,...,clipN;
background-origin : origin1,origin2,...,originN;
background-color : color;
참고:
각 배경 그룹의 약어 값을 쉼표로 구분하세요.
크기 값이 있는 경우 뒤에 위치가 오고 "/"로 구분되어야 합니다.
배경 이미지가 여러 개 있는 경우, 그러나 다른 속성은 하나만 있습니다(예: 배경 반복이 하나만 있음). 이는 이 속성 값이 모든 배경 이미지에 적용됨을 나타냅니다.
배경색은 하나만 설정할 수 있습니다.
예를 살펴보겠습니다.
여기서 5개의 사진을 div 컨테이너의 배경으로 사용하려고 합니다.
HTML 코드:
<div class="div1">
<a href="http://ask.php.cn/" title="BeyondWeb-分享知识，分享快乐">php中文网</a> </div>
CSS 코드:
.div1{
margin:50px auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;
background-image:url(http://www.jnnews.tv/_CMS_NEWS_IMG_/www2/2011-04/20/sy/cms_9266e59e30584f02b09200b15f96a29f_0364_10_49_34.jpg),url(http://image27.360doc.com/DownloadImg/2011/04/2513/11209781_14.jpg),url(http://s6.sinaimg.cn/bmiddle/4efc7f58ge08613748ce6&690),url(http://imgsrc.baidu.com/forum/w%3D580/sign=79520e92632762d0803ea4b790ed0849/8a6104a4462309f740ec1ca3720e0cf3d6cad6a8.jpg),url(http://img1.3lian.com/2015/w7/85/d/101.jpg);
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
}위 코드에는 다음 문장이 있습니다.
background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
사실, 다음과 같이 단순화할 수 있습니다. 앞서 "배경 이미지가 여러 개 있지만 다른 속성이 하나만 있는 경우(예: 배경 반복이 하나만 있는 경우) 이 속성 값은 모든 배경 이미지에 적용됩니다."라고 언급한 바 있습니다. 단순화하여:
background-repeat:no-repeat;
값만 작성하면 효과는 동일합니다.
물론 위에서 배경 이미지의 다양한 속성을 설정할 때 별도로 작성하기 때문에, 배경 이미지의 다양한 속성을 함께 작성할 수도 있습니다. 이때 CSS 코드는 다음과 같습니다. 🎜>아아아아
다음 섹션
