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

In layman’s terms, it’s actually:

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