The difference between Background-origin and Background-clip

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