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 时，背景将占据内容区域。