CSS3 Tutorial: Background Property Tuning Enhancements

Web page Production WEBJX article introduction: css3.0 The adjustment and enhancement of background.

(Note: Only the CSS3 to the background adjustment, the increased attributes of the translation)
CSS3 for backgrounds to make some changes, the most obvious one is to adopt a multiple background, not only added 4 new attributes, and also the current properties are adjusted to enhance.

1. Multiple background pictures
In CSS3, you can apply more than one background image to another tag element. The code is similar to the css2.0 version, but you need to separate the "," comma from the reference picture. The first image is positioned at the top of the element background, followed by a background picture that appears below it, as follows:

Background-image:url (top-image.jpg), url (middle-image.jpg), url (bottom-image.jpg);

2. New properties: Background Clip
This discussion lets us go back to the issue that the background is obscured by the border border in the beginning of the article. The addition of Background-clip gives us complete control over where the background is displayed. The property values are as follows:
(1) Background-clip:border background is displayed under border border
(2) background-clip:padding the background is displayed under padding instead of border the border begins
(3) Background-clip:content the background is displayed under the content area instead of starting under the border border or under padding.
(4) Background-clip:no-clip; Default property value, similar to Background-clip:border;

3. New properties: Background Origin

This property needs to be used in conjunction with Background-position. You can use Background-position to compute the location from the Border,padding or Content boxes area. (similar to Background-clip)
(1) Background-origin:border;
From the border border position
(2) background-origin:padding;
From the padding position.
(3) Background-origin:content;
From the Content-box content area position;

Background-clip and Background-origin The difference between the www.CSS3.info site to do a good analysis of the explanation.

4, new properties: Background Size
The Background Size property is used to reset your background picture. There are several property values:
(1) Background-size:contain;
Reduce the background picture to fit the label element (mainly pixel ratio)
(2) Background-size:cover;
Let the background picture enlarge to the entire LABEL element size (mainly pixel ratio)
(3) background-size:100px 100px;
Indicate the size of the background picture scaling
(4) background-size:50% 100%;
Percentage is the size of the content label element to scale the size of the picture

You can go to the CSS 3 specifications site to see a simple case description.

5, new properties: Background break

CSS3 tags can be divided into different areas (such as: let inline elements span across multiple lines), Background-break properties can control the background display in different regions.
Property value:

(1) background-break:continuous;
This property is the default value, ignoring the spacing gap between areas (apply pictures to them as if they were an area)
(2) Background-break:bounding-box;
Reconsider the interval between zones
(3) Background-break:each-box;
The background is reclassified for each individual label area.

6, the background color adjustment

The Background-color property is slightly enhanced in the CSS3 version, in addition to specifying background color background colors, can also be used to color the background picture of the label element.

Background-color:green/blue in this case, the background color may be green, however, if the bottom background picture is not valid, blue will be displayed instead of green. If you don't specify a color, it treats it as transparent.

7. Adjustment of background repetition

CSS2 when setting the background, it is often intercepted by the tag element and is not fully displayed, CSS3 introduces 2 new properties to fix the problem.
Space: The picture is tiled with the same spacing and fills the entire LABEL element
Round: The picture is scaled automatically until it fits and fills the entire LABEL element

The use of CSS 3 specifications Web sites for Background-repeat:space is a ready-made example.

8, the adjustment of Background attachment

Background attachment has a new attribute value: Local, which is valid when the label element scrolls (such as setting overflow:scroll;), and when Background-attachment is set to scroll, The background picture is not scrolled with the content scroll bar. Now, with the background-attachment:local, you can make the background scroll with the content of the element.

Chinese Original:css3.0 's adjustment and enhancement to background
English Original:backgrounds in CSS3