Implementation of multiple backgrounds (Multiplebackgrounds) _ CSS/HTML

You should be familiar with the background attribute background-image. In CSS2, the attributes related to this attribute are also background-repeat (set whether the background is repeated or not) background-position (set the position of the background image in the container) and background-attachment (set whether the background is scrolled along with the page). These attributes are used to control how the background image is displayed in the container, however, we can only provide one background image for the container. If we want to use multiple images for the background of a container, what should we do? Then add some useless elements to the container? The birth of CSS3 solves this problem. In CSS3, multiple background images can be set for a container through background-image or background, that is to say, we can put different background images in only one block element.

First, let's look at the Syntax:

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

Separate URLs of multiple background images with commas (,). If there are multiple background images and only one other attribute (for example, background-repeat) exists ), this attribute value is applied to all background images.

Here is an example:

Here we will use five images as the background of a p container. Let's take a look at the Code:

HTML code:

The Code is as follows:

Foot home

CSS code:

The Code is as follows:

. P1 {
Margin: 50px auto;
Width: 700px;
Height: pixel PX;
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;
Background-position: top left, top right, bottom left, bottom right, center;
}

The effect is as follows:

The above Code contains the following sentence:

The Code is as follows:

Background-repeat: no-repeat;

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

Of course, the attributes of the background image are written separately. You can also write the attributes of the background image. 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;
...
}

Oh, that's the case for CSS3. It's easy. The complete source code and examples are provided below, which can be used as a reference.