background-clip和background-origin都为CSS3新增属性，且它俩的值都为border-box、padding-box和content-box，很容易混淆。
1.background-origin
我们都知道，background-position 属性用来设置背景图像的起始位置，其默认值为top left，即元素的左上角。可是这个“左上角”是相对于元素的什么位置（border、padding、content）来定位的，却是由属性background-origin决定的，其默认值为padding-box。即默认情况下，背景图像从元素padding的左上角开始渲染。
background-origin的包含：
padding-box 背景图像相对于内边距框来定位。
border-box 背景图像相对于边框盒来定位。
content-box 背景图像相对于内容框来定位。
background-origin的示例如下（示例中所用的背景图片来源于网络）：
background-origin示例图
background-origin示例所对应的的CSS代码如下：
div {
width: 150px;
height: 150px;
margin: 20px;
background: peachpuff url("imgs/background.jpg") no-repeat;
border: 10px dashed gray;
padding: 20px;
display: inline-block;
}
.border-box-div {
background-origin: border-box;
}
.padding-box-div {
background-origin: padding-box;
}
.content-box-div {
background-origin: content-box;
}
2.background-clip
background-clip用来规定背景（包含背景图像和背景色）的绘制区域。它定义了对背景进行裁剪的基准位置，在基准位置外的背景将直接被裁剪掉。其默认值为border-box，其值包含：
padding-box 背景被裁剪到内边距框。
border-box 背景被裁剪到边框盒。
content-box 背景被裁剪到内容框。
background-clip的示例如下（示例中所用的背景图片来源于网络）：
background-clip示例图
background-clip示例所对应的的CSS代码为：
div {
width: 150px;
height: 150px;
margin: 20px;
background: peachpuff url("imgs/background.jpg") no-repeat;
border: 10px dashed gray;
padding: 20px;
display: inline-block;
}
.border-box-div {
background-clip: border-box;
}
.padding-box-div {
background-clip: padding-box;
}
.content-box-div {
background-clip: content-box;
}
网友评论