The difference between background-origin and background-clip

original  http://www.cnblogs.com/shytong/p/5077129.html

background-clip and background-origin are two attributes related to element background introduced in css3. They have the same optional values, namely border, padding, and content, and these two attributes represent the element background and Some relationship between an element's border, padding, and content area.

Although the two seem to achieve the same effect, their principles are different. background-origin defines the starting point of the background position (background-position); and background-clip is the cutting of the background (image and background color).

1.background-origin

Let's look at an example:

Let's take a look at the style style:

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

Next, we open the comment to further verify the backgroung-origin.

2.backgroung-clip

Let's go straight to 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 background-clip is just a rough crop of the background and background color.