background-clip和background-origin 详解

<div class="box border-box"/>
<div class="box padding-box"/>
<div class="box content-box"/>
<div class="box clip-border-box"/>
<div class="box clip-padding-box"/>
<div class="box clip-content-box"/>

.box{
  padding: 20px;
  margin: 30px;
  height: 200px;
  width: 200px;
  border: 20px dashed red;
  display: inline-block;
  background: yellow url(./assets/border.jpg) no-repeat;
}
.border-box{
  background-origin: border-box;
}
.padding-box{
  background-origin: padding-box;
}
.content-box{
  background-origin: content-box;
}
.clip-border-box{
  background-clip: border-box;
}
.clip-padding-box{
  background-clip: padding-box;
}
.clip-content-box{
  background-clip: content-box;
}

background-origin 属性是用来控制元素背景图片定位点（background-position）的起始位置。

background-origin 属性取值padding-box，背景图片起始位置（background-position）将相对于padding的外边缘进行定位。

background-origin 属性取值border-box，背景图片起始位置（background-position）将相对于border的外边缘进行定位。

background-origin 属性取值content-box，背景图片起始位置（background-position）将相对于content的外边缘进行定位。

 

background-clip 属性是用来控制元素背景图片（background-image）的展示区域。

background-clip属性，取值为border-box，元素背景图片（background-image）只会在border、padding和content区域显示。

background-clip属性，取值为padding-box，元素背景图片（background-image）只会在padding和content区域显示。

background-clip属性，取值为border-box，元素背景图片（background-image）只会在content区域显示。