The difference between background-origin and background-clip in CSS3_html/css

The difference between background-origin and background-clip in CSS3_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Release： 2016-06-24 12:06:43

Original

1389 people have browsed it

background-origin: to determine how the background-position of a background in a certain box is calculated.

background-clip: to determine whether the backgrounds extends into the border or not.

In layman’s terms, it’s actually:

background-origin: used to determine where the background starts to be drawn

background-clip: used to determine where the background starts from Where to start displaying (in fact, you can feel it from the literal meaning of origin and clip, clip means cutting), and where the background can be extended.

They all have three values: border-box | padding-box | content-box, where the default value of background-origin is padding-box, and the default value of background-clip is border-box.

The following example should be able to express their differences more straightforwardly:

Write one first

1	`<div` `class='box'></div>`

Copy after login

Then add a simple style:

1	`.box{ width:450px; height:300px; background-image: url('http://a4.att.hudong.com/40/03/16300001203327135349034613246.jpg'); background-repeat:no-repeat; background-size: 400px 240px; border: 30px dashed #458B74; background-color:#B9D3EE; padding:20px;}`

Copy after login

The displayed effect is as follows:

It can also be seen here that the default values of background-origin and background-clip are respectively padding-box and border-box.

When adding the following sets of codes, you can see different effects:

A---------------------- -------------------------------------------------- ------------------

1	`.box{ background-origin:border-box; background-clip:border-box;}`

Copy after login

You can see here that the background image is from the border Start drawing and the display starts from the border, so the effect is as above.

B---------------------------------------------- --------------------------------------------------

1	`.box{ background-origin:border-box; background-clip:padding-box;}`

Copy after login

The drawing still starts from the border, but the display starts from the padding, so it is displayed as above.

c--------------------------------------------- --------------------------------------------------

1	`.box{ <strong>background-origin</strong>:content-box; background-clip:border-box;}`

Copy after login

Drawing starts from content and display starts from border.

D---------------------------------------------- --------------------------------------------------

Of course, if the drawing starts from the border and the display starts from the content, the effect will be as follows.

1	`.box{ background-origin:border-box; background-clip:content-box;}`

Copy after login