两个比较重要的属性: background-origin与background-clip
background-clip: border-box | padding-box | content-box
默认值是border-box
background-clip 定义了背景的绘制区间(图片或颜色), 是否延伸到边框下面。
background-origin: padding-box | border-box | content-box
默认值是padding-box
background-origin 规定了背景图片(background-image)的原点位置的背景相对区域.
他们共同决定了background的绘图区域.
background-origin只对background-image生效;background-clip对图片和背景色均生效
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-color:#9c27b0;
padding: 20px;
}
image.png
下面做一些变更:
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-color:#9c27b0;
padding: 20px;
background-clip: content-box
}
image.png
对于background-image:情况会更复杂一些.
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg');
background-repeat: no-repeat;
padding: 20px;
background-origin: padding-box;
background-clip: content-box
}
image.png
这里实际上background-origin失效了,原因是----origin定义的起始点"超出了"clip定义的绘图区域,所以以clip为准
另一个例子:
.demo {
width: 60px;
height: 60px;
border: 20px dashed #2196f3;
background-image:url('http://www.qq1234.org/uploads/allimg/150602/8_150602171754_2.jpg');
background-repeat: no-repeat;
padding: 20px;
background-origin: content-box;
background-clip: padding-box
}
image.png
情况又正常了吧~
