CSS背景属性,background-origin和background-clip

一.background-origin

background-origin用来控制背景图片的位置

他有两个值:

                        padding-box(默认):指定背景图片由padding开始展示

                        content-box:指定背景图片在内容区域开始展示

                        border-box:指定背景图片在边框区域开始展示

1.background-origin:padding-box(默认值);

在我们给一个盒子设置了背景图片时这个背景图片默认是从padding开始展示的

.box{
        width: 600px;
        height: 500px;
        padding: 50px;
        border:20px dotted blueviolet;
        background: url(img/img.jpg) no-repeat;
    }

此时网页呈现:

可以看到我已经给此盒子设置了padding:50px;但是我们看到背景图片扔紧贴边框展示

这就是background-origin默认值padding-box呈现的效果.

2.background-origin:content-box;

现在我给盒子的background-origin改变为content-box

.box{
        width: 600px;
        height: 500px;
        padding: 50px;
        border:20px dotted blueviolet;
        background: url(img/img.jpg) no-repeat;
        background-origin: content-box;
    }

 

 

可以从控制台看到此时背景 图片是在内容区域开始展示这就是background-origin:content-box;的使用了

3.background-origin:border-box;

这个属性是指定背景图片从边框开始展示

.box{
        width: 600px;
        height: 500px;
        padding: 50px;
        border:20px dotted blueviolet;
        background: url(img/img.jpg) no-repeat;
        /* background-origin: content-box; */
        background-origin: border-box;
    }

现在我们看到这个时候背景图片从边框开始展示的.

二.background-clip裁剪背景 规定背景的绘制区域

同样有三个值

                        border-box(默认值) 规定绘制区域由border开始

                        content-box        规定绘制区域content

                         padding-box        规定绘制区域padding开始

1.backgroun-clip:border-box;

.d2{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: blueviolet;
        border: 20px dotted brown;
        margin-top: 100px;
    }

因为我们设置边框样式为dotted我们看到边框空隙由背景颜色填充了.此时为默认值backgroun-clip:border--box;

2.content-box

.d2{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: blueviolet;
        border: 20px dotted brown;
        margin-top: 100px;
        background-clip: content-box;

        padding: 50px;
    }

这个时候可以看到只有内容区域有背景颜色.不包含border和padding

 

 

此时页面展示的效果就只有内容由背景颜色填充了

3.padding-box

.d2{
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: blueviolet;
        border: 20px dotted brown;
        margin-top: 100px;
        background-clip: padding-box;

        padding: 50px;
    }

 此时我们改变盒子backgro-clip为padding-box

可以看到背景颜色填充到了padding部分

 

三.background-clip和back-ground-origin区别

这两者的用法和效果相似.有什么区别呢我们设置代码两个属性都添加看看效果

.box{
        width: 600px;
        height: 500px;
        padding: 50px;
        border:20px dotted blueviolet;
        background: url(img/img.jpg) no-repeat;
        /* background-origin: content-box; */
        background-origin: border-box;
        background-clip: content-box;
        background-color: cadetblue;
    }

这个盒子我们指定了背景颜色和背景图片我们添加clip为content-box而origin为border-box

此时我们看到内容区以外的背景图片也不显示了.

而我们试试clip设置为border-box而origin设置为content-box

.box{
        width: 600px;
        height: 500px;
        padding: 50px;
        border:20px dotted blueviolet;
        background: url(img/img.jpg) no-repeat;
        /* background-origin: content-box; */
        /* background-origin: border-box; */
        /* background-clip: content-box; */
        background-clip: border-box;
        background-origin: content-box;
        background-color: cadetblue;
    }

此时页面展示的效果为

 

我们看到背景颜色依然正常显示

这个时候我们可以得知background-clip是可以把background-origin给裁减掉的.

而origin无法裁减掉backgorund-clip的