The difference between "CSS3" Background-origin and Background-clip

Background-clip and Background-origin are the two attributes associated with the element background introduced in CSS3, which have the same optional values, namely border, padding, content three, And both of these properties represent some kind of relationship between the element background and the element border, the padding (padding), and the content area.

Although the two seem to achieve similar results, the two principles are different. Background-origin defines the starting point of the background position (background-position), while Background-clip is the cutting of the background (picture and background color).

1.background-origin

Let's take a look at the example:

Let's take a look at style styles:

. bg{width:100px;            height:100px;            padding:50px; border:10px Dashed #000000; Background: #ffff00 URL (' Pic1.gif ') no-repeat; Margin-top:10px; Display:inline-Block; }. bg_origin_border{Background-origin:border-box; /*background-position:10px 10px;*/}. bg_origin_padding{background-origin:padding-box; /*background-position:10px 10px;*/}. bg_origin_content{background-origin:content-box; /*background-position:10px 10px;*/        }

Here we open the note to further verify the Backgroung-origin.

2.backgroung-clip

Let's take a look at the example:

Style:

. bg_clip_border{            background-clip:border-box;             /* background-position: -10px-10px; */         }        . bg_clip_content{            background-clip:content-box;             /* background-position: -10px-10px; */         }        . bg_clip_padding{            background-clip:padding-box;             /* background-position: -10px-10px; */         }

We then remove the comment:

　　This confirms that the background-clip is just a rough cut of the background and back color.

The difference between "CSS3" Background-origin and Background-clip