Implementation of multiple backgrounds of CSS3 instance sharing (multiple backgrounds) _css/html

The birth of CSS3 solves this problem for us, in CSS3, through background-image or background can set multiple background images for a container, that is to say, the different background image can only be placed in a block element.

First, let's take a look at the grammar:

Background: [Background-image] | [Background-origin] | [Background-clip] | [Background-repeat] | [Background-size] | [Background-attachment] | [Background-position]

The URLs of multiple background pictures are separated by commas, and if there are multiple background pictures and only one other property (for example, Background-repeat only), then all background pictures apply the property value.

Let's take a look at the following example:

Here we're going to use 5 pictures as the background of a DIV container, let's take a look at the code:

HTML code:

Copy Code code as follows:

<div class= "Div1" >
<a href= "#" title= "cloud-dwelling Community" > cloud-Habitat Community </a>
</div>

CSS code:

Copy Code code as follows:

. div1{
margin:50px Auto;
width:700px;
height:450px;
border:10px dashed #ff00ff;

Background-image: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,no-repeat,no-repeat;
Background-position:top left,top right,bottom left,bottom right,center Center;
}

The effect of the following figure:

There is this sentence in the above code:

Copy Code code as follows:

Background-repeat:no-repeat;

Write a value on the line, the effect is exactly the same.

Of course, the above set the background picture of the various attributes are written separately, then we can also write the background picture of the various attributes in a piece, at this time the CSS code is as follows:

Copy Code code as follows:

. div1{
...
Background:url (images/1.jpg) no-repeat top left,
URL (images/2.jpg) no-repeat top right,
URL (images/3.jpg) No-repeat bottom left,
URL (images/4.jpg) No-repeat bottom right,
URL (images/5.jpg) no-repeat Center Center;
...
}

Oh, CSS3 a variety of backgrounds is such a thing, very simple. The following provides a complete source code and examples that can be used as a reference.