CSS3 for background made some changes, the most obvious one is the use of setting multi-background, not only added 4 new attributes, and also the current properties have been adjusted to enhance.
1. Multiple background images
Inside the CSS3 you can apply multiple background image codes in a tag element similar to the css2.0 version, but use "," commas to separate the reference images. The first image is positioned on the topmost background of the element, followed by a background image that appears below it, as follows:
Background-image:url (top-image.jpg), url (middle-image.jpg), url (bottom-image.jpg);
2. New attribute: BACKGROUNP Clip
Sometimes the background can be added by border border occlusion Backgrounp-clip to give us full control over where the background is displayed. The property values are as follows:
Backgrounp-clip:border background starts to show under border border
Backgrounp-clip:padding background starts showing under padding instead of border border
The backgrounp-clip:content background starts under the content area instead of starting under the border border or under padding.
4) background-clip:no-clip; default attribute value, similar to Background-clip:border;
3. New Attribute BACKGROUNP origin
This property needs to be used in conjunction with Background-position. You can use Background-position to calculate the positioning from the border,padding or Content boxes contents area. (similar to Background-clip)
(1) Background-origin:border-box;
From border border position
(2) Background-origin:padding-box;
From padding location
(3) Background-origin:content-box;
From the location of the Content-box content area;
Background-clip and Background-origin differences www.CSS3.info site to do a good analysis of the explanation.
4. New attribute: Background Size
The Background Size property is used to reset your background picture. There are several property values:
(1) Background-size:contain;
Shrink the background image to fit the label element (mainly pixel ratio)
(2) Background-size:cover;
Enlarges the background image to the entire LABEL element size (mainly pixel ratio)
(3) background-size:100px 100px;
Size that indicates the scale of the background image
(4) background-size:50% 100%;
Percentage is the size of the content label element to scale the size of the picture
5. New attribute: Background break
CSS3 tag elements can be divided into different regions (such as: let inline element span spans multiple lines), the Background-break property can control the background display in different regions.
Property value:
(1) background-break:continuous;
This property is the default value, ignoring gaps between zones (applying pictures to them as if they were an area)
(2) Background-break:bounding-box;
Reconsider the interval between regions
(3) Background-break:each-box;
The background is re-divided for each individual label area.
HTML Learning Note CSS3 (background)