The difference between Background-origin and Background-clip

Source: Internet
Author: User

Background-origin and Background-clip are the newly added attributes in CSS3, in fact one is the placement of the background image, and the other is the clipping of the background image.

Background-origin and Background-clip have the same choice: Content-box,padding-box,border-box (note that in Firefox and Chrome and Safari, you need to use private properties, Plus-mox-and-webkit-)

Before you differentiate, explain:

This is a common box model, where the edges of content, padding, border, margin are identified in the diagram, and they play an important role in distinguishing between 3 choices (Content-box,padding-box,border-box).

Origin's translation comes at the original meaning. As the name implies, so Background-origin is used to determine the original starting position of the image, that is, you can choose whether the background image starts from the content area, whether it is an inner margin, or a border.

1 . Border2{3 background:URL (resource/20131113040150849.jpg);4 background-repeat:no-repeat;5 background-position:Left top;6 Border-width:30px;7 Border-style:Dashed;8 Border-color:Red;9 width:200px;Ten Height:300px; One padding:30px; A margin:0 Auto; -}
View Code

Background-origin:margin background-origin:padding background-origin:content

We see that when the value of Background-origin is Content-box, first the upper-left corner of the background picture is aligned with the upper-left corner of the content edge, and the upper-left corner of the background picture is aligned with the upper-left corner of the inner margin when padding-box. And so on The value of the visible background-origin really determines which area the background picture begins to display from.

Also, where is the default starting position for Background-origin? This is not a demonstration, but remember-it's padding.

Next introduced Background-clip, its role for the background picture to do the appropriate tailoring to meet the needs. Of course, this is not the real meaning of the picture to be cropped, but based on the value of the property. Make proper concealment of certain parts of the picture.

How to cut a method. Depending on the part of the box you set, the image will not be visible outside the outside edge of the area.

1 . Border2{3 background:URL (resource/20131113040150849.jpg);4 background-repeat:no-repeat;5 background-position:Left top;6 Border-width:30px;7 Border-style:Dashed;8 Border-color:Red;9 width:200px;Ten Height:300px; One padding:30px; A margin:0 Auto; - Background-origin:Border; - -moz-background-origin:Border; the -ms-background-origin:Border; - -o-background-origin:Border; - -webkit-background-origin:Border; - Background-clip:Content-box; +}
View Code

Tested, in Firefox, Chrome, ie9+ browser performance.

Thus, although the picture is positioned from the top-left corner of the bounding rectangle, the properties of the clipping property background-clip are set to Content-box, so only the content of the contents area is visible, That is, as long as the contents of the image outside the content is hidden away.

The difference between Background-origin and Background-clip

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.