HTML | DOM 样式 backgroundClip 属性

介绍

backgroundClip 属性用于指定背景图像的绘制区域。它是 CSS3 的一部分，针对背景图片具有更精细的控制。

背景图片通常绘制在元素的内容区域内，如果元素有边框，边框会覆盖在背景图片上。backgroundClip 属性可以控制背景图片的绘制区域，让图片可以绘制在元素的内容区域内、边框内或边框外。

backgroundClip 属性的可选值有以下几个：

• border-box：背景图片将被绘制在元素的边框盒子（border box）内。如果元素设置了边框，背景图片会被边框覆盖。

• padding-box：背景图片将被绘制在元素的内边距盒子（padding box）内，不会受到边框的影响。

• content-box：背景图片将只被绘制在元素的内容区域（content box）内，不会受到边框和内边距的影响。

• text：背景图片将只被绘制在元素的文本内容上，不会受到边框、内边距和其他内容的影响。

语法

background-clip: border-box|padding-box|content-box|text|initial|inherit;

• border-box：背景图片绘制在边框盒子内。
• padding-box：背景图片绘制在内边距盒子内。
• content-box：背景图片只绘制在内容区域内。
• text：背景图片只绘制在文本上。
• initial：将属性设置为默认值。
• inherit：从父元素继承该属性。

示例

以下示例演示了 backgroundClip 属性的用法：

<style>
  #example1 {
    background-image: url("example.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    border: 20px solid #ddd;
    padding: 20px;
    width: 200px;
    height: 200px;
  }
  #example1.border-box {
    background-clip: border-box;
  }
  #example1.padding-box {
    background-clip: padding-box;
  }
  #example1.content-box {
    background-clip: content-box;
  }
  #example2 {
    background-image: url("example.jpg");
    background-size: contain;
    background-repeat: no-repeat;
    padding: 20px;
    width: 200px;
    height: 200px;
  }
  #example2.text {
    background-clip: text;
  }
</style>
<div id="example1" class="border-box"></div>
<div id="example1" class="padding-box"></div>
<div id="example1" class="content-box"></div>
<div id="example2" class="text">
  <p>This is some text with background.</p>
</div>

上述示例中展示了 backgroundClip 属性的四种取值，并在页面上显示了其效果。

总结

• backgroundClip 属性用于指定背景图像的绘制区域。
• 取值包括 border-box、padding-box、content-box、text、initial、inherit。
• 可以在元素上设置 backgroundColor 属性，实现渐变背景效果。