multiple backgroundsMultiple backgrounds

Everyone should be familiar with the background attribute background-image. In CSS2, its related attributes include background-repeat (setting whether the background is repeated and how to repeat it), background-position (setting the background image in the container) position), background-attachment (setting whether the background scrolls with the page), use these properties to control how the background image is displayed in the container, but we can only provide one background image for the container. If we want a container The background is implemented with multiple pictures, so how do we do it? Add some useless elements to the container?

The birth of CSS3 solved this problem for us. In CSS3, multiple background images can be set for a container through background-image or background, which means that different background images can be placed in only one inside the block element.

First let’s take a look at the syntax:

background ： [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...

Use commas to separate the URLs of multiple background images. If there are multiple background images and only one other attribute (for example There is only one background-repeat), then this attribute value is applied to all background images.

The above abbreviation can be disassembled into the following form:

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;

Note:

Separate the abbreviation value of each group of background with commas;

If there is a size value, it needs to be followed by position and separated by "/";

If there are multiple background images, and there is only one other attribute ( For example, there is only one background-repeat), indicating that this attribute value applies to all background images.

background-color can only be set to one.

Let’s take a look at an example:

Here we want to use 5 pictures as the background of a div container. Let’s take a look at the code:

HTML Code:

<div class="div1">
    <a href="http://ask.php.cn/" title="BeyondWeb-分享知识，分享快乐">php中文网</a> </div>

CSS code:

.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;
    
}

In the above code, there is this sentence:

background-repeat:no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;

In fact, it can be simplified, because it has been mentioned before that "if there is If there are multiple background images and there is only one other attribute (for example, there is only one background-repeat), then this attribute value will be applied to all background images. "So it can be simplified to:

background-repeat:no-repeat;

Just write a value, and the effect is. exactly the same.

Of course, when setting the various attributes of the background image above, they are written separately, so we can also write the various attributes of the background image together. At this time, the CSS code is as follows:

.div1{
   
    background:url(http://www.jnnews.tv/_CMS_NEWS_IMG_/www2/2011-04/20/sy/cms_9266e59e30584f02b09200b15f96a29f_0364_10_49_34.jpg) no-repeat top left,
               url(http://image27.360doc.com/DownloadImg/2011/04/2513/11209781_14.jpg) no-repeat top right,
               url(http://s6.sinaimg.cn/bmiddle/4efc7f58ge08613748ce6&690) no-repeat bottom left,
               url(http://imgsrc.baidu.com/forum/w%3D580/sign=79520e92632762d0803ea4b790ed0849/8a6104a4462309f740ec1ca3720e0cf3d6cad6a8.jpg) no-repeat bottom right,
               url(http://img1.3lian.com/2015/w7/85/d/101.jpg) no-repeat center center; 
}