Css3 early adopters (2): Use CSS to set multiple backgrounds, gradient backgrounds, and specify the background size

Some exciting features are added to the background section in the css3 specification, such as setting multiple background images, specifying the background size, and setting the background gradient. The background attributes defined in the css3 specification include:

Attribute name	Possible Value	Default Value
Background	Is a short form: BG-image | BG-position |/BG-size | repeat-style | attachment | BG-origin, you can set background-color for the last background layer.
Background-Attachment	Scroll | fixed | Local	Scroll
Background-clip	Border-box | padding-box Method for rendering the background: padding box indicates that the background is rendered in the padding box; border-box indicates that the background is rendered in the border-box.	Border-box
Background-color	<Color>	Transparent
Background-Image	Image | none You can set multiple background images separated by commas. None also represents a background layer	None
Background-Origin	Border-box | padding-box | content-box The relative position of the background, relative to one of the above three values.	Padding-box
Background-Position	% Length top right bottom left center These attributes are set in a similar way as before.	0% 0%
Background-repeat	Repeat-x | repeat-y | [Repeat | space | round | no-Repeat] {1, 2} Tile Mode	Repeat
Background-size	[Length | % | auto] {1, 2} | cover | contain Set the background size. Contain indicates that the scaled background occupies the maximum height or width. Cover indicates that the background is full.	Auto

The following example shows some new css3 functions. Among them, css3 allows multiple background images. Each background image occupies a layer, and the layers are written in the order of CSS. The first background is written in the top layer.

CSS code Background: URL (http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,

URL (http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,

URL ("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-Repeat;

Is the abbreviation of the background. Besides the default value, it is equivalent to the following statement:

CSS code Background-image: URL ("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"), URL ("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"), URL ("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg ");

Background-repeat: No-repeat, no-repeat, no-Repeat;

Background-position: 0 0, 200px 0, 400px 201px;

Another thing to note is that the background is gradually a background layer, so in example 4

CSS code Background-image:-moz-linear-gradient (left, rgba (0,255, 0, 1), rgba (255, 0, 0 )),

URL ("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg ");

The writing order cannot be reversed.

CSS code Background-image: URL ("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg "),

-Moz-linear-gradient (left, rgba (0,255, 0, 1), rgba (255, 0, 0 ));

You cannot see the gradient effect.

The source code of the example is as follows:

XML/XHTML code <
Style
Type
= "Text/CSS"
>

Div {font-size: 24px; font-weight: Bo; D; color: # f00; text-align: Right; margin: 10px 0 ;}

# Div1

{

Height: 400px; width: 600px;

Border: 4px solid orange;

Background-image: URL ("http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg"), URL ("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg"), URL ("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg ");

Background-repeat: No-repeat, no-repeat, no-Repeat;

Background-position: 0 0, 200px 0, 400px 201px;

}

# Div2

{

Height: 400px; width: 600px;

Border: 4px solid orange;

Background: URL (http://dotnet.aspx.cc/Book/Images/CSS1_s.jpg) 0 0 no-repeat,

URL (http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg) 200px 0 no-repeat,

URL ("http://dotnet.aspx.cc/Book/Images/ASPNET20Book1_s.jpg") 400px 201px no-Repeat;

}

# Div3

{

Height: 100px; width: 600px;

Border: 4px solid orange;

Background-image:-moz-linear-gradient (left, red, orange, yellow, green, blue, indigo, violet );

}

# Div4

{

Height: 100px; width: 600px;

Border: 4px solid orange;

Background-image:-moz-linear-gradient (left, rgba (0,255, 0, 1), rgba (255, 0, 0 )),

URL ("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg ");

}

# Div5

{

Height: 400px; width: 600px;

Border: 4px solid orange;

Background-image: URL ("http://dotnet.aspx.cc/Book/Images/CSS2_s.jpg ");

-Moz-Background-size: cover;

Background-repeat: No-Repeat;

}

</
Style
>


<
Div
ID
= "Div1"
>
Div1
</
Div
>


<
Div
ID
= "Div2"
>
Div2
</
Div
>


<
Div
ID
= "Div3"
>
Div3
</
Div
>


<
Div
ID
= "Div4"
>
Div4
</
Div
>


<
Div
ID
= "Div5"
>
Div5
</
Div
>

The final display effect of the above example is shown in (if the image cannot be displayed, click the link to view it ).To view the effect of this example, you need the Firefox 3.6, javasme, and safari4 browsers. Firefox 3.6 shows all the results.

Http://dotnet.aspx.cc/Images/mengxianhui_css3_3.jpg