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

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

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

Then add a simple style:

.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;}

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---------------------- -------------------------------------------------- ------------------

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

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---------------------------------------------- --------------------------------------------------

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

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

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

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

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.

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