CSS3 background-clip 属性
CSS3 background-clip 属性
1. 简介
CSS3 background-clip 属性规定背景的绘画区域。
2. 语法
background-clip: border-box | padding-box | content-box | initial | inherit;
border-box
:背景将被裁剪到边框盒。默认值。padding-box
:背景将被裁剪到内边距框。content-box
:背景将被裁剪到内容框。initial
:设置为默认值。inherit
:继承父元素的属性值。
3. 属性值的作用
3.1 border-box
当设置 background-clip 属性的值为 border-box 时,背景的绘画区域将被裁剪到当前元素的边框框。即背景将占据元素的整个边框及其内部区域。
div {
background-image: url("example.jpg");
background-clip: border-box;
}
3.2 padding-box
当设置 background-clip 属性的值为 padding-box 时,背景的绘画区域将被裁剪到当前元素的内边距框。即背景将占据当前元素边框内的所有区域。
div {
background-image: url("example.jpg");
background-clip: padding-box;
}
3.3 content-box
当设置 background-clip 属性的值为 content-box 时,背景的绘画区域将被裁剪到当前元素的内容框。即背景将占据当前元素文本区域的大小。
div {
background-image: url("example.jpg");
background-clip: content-box;
}
4. 总结
CSS3 background-clip 属性规定了背景图像的绘制区域,通过修改属性值可以控制背景图像的绘制范围。默认值是 border-box,即背景将从边框盒开始绘制。当指定 background-clip 属性值为 padding-box 时,背景将占据内边距区域;当指定属性值为 content-box 时,背景将占据内容区域。