HTML Learning Note CSS3 (background)

Source: Internet
Author: User

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)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.