Implementation of multiple backgrounds by sharing CSS3 examples

Everyone should be familiar with the background attribute background-image. In CSS2, there are also properties related to it background-repeat (how to set whether the background is repeated and how to repeat it) ), background-position (set the position of the background image in the container), background-attachment (set whether the background scrolls with the page), use these properties to control the position of the background image in the container How to display it in the container, but we can only provide one background image for the container. If we want to use multiple images for the background of a container, how should 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-image] | [background-origin] | [background-clip] | [ background-repeat] | [background-size] | [background-attachment] | [background-position]

Use commas to separate the URLs of multiple background images. However, 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.

Let’s take a look at an example:

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

HTML code:

## The code is as follows:

Script Home

CSS code:

## Code As follows:

.p1{

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 is as follows:

##There is this sentence in the above code:

The code is as follows :

background-repeat:no-repeat;

Just write a value, 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. In this case, the CSS code is as follows:

The code is as follows:

.p1{

...

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, that’s what CSS3 multiple backgrounds are, it’s very simple. The complete source code and examples are provided below, which can be used as a reference.

The above is the detailed content of Implementation of multiple backgrounds by sharing CSS3 examples. For more information, please follow other related articles on the PHP Chinese website!