background-origin用来控制背景图片的位置
他有两个值:
padding-box(默认):指定背景图片由padding开始展示
content-box:指定背景图片在内容区域开始展示
border-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呈现的效果.
现在我给盒子的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;的使用了
这个属性是指定背景图片从边框开始展示
.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;
}
现在我们看到这个时候背景图片从边框开始展示的.
同样有三个值
border-box(默认值) 规定绘制区域由border开始
content-box 规定绘制区域content
padding-box 规定绘制区域padding开始
.d2{
width: 100px;
height: 100px;
border-radius: 50%;
background-color: blueviolet;
border: 20px dotted brown;
margin-top: 100px;
}
因为我们设置边框样式为dotted我们看到边框空隙由背景颜色填充了.此时为默认值backgroun-clip:border--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
此时页面展示的效果就只有内容由背景颜色填充了
.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部分
这两者的用法和效果相似.有什么区别呢我们设置代码两个属性都添加看看效果
.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的