background-clip

基线 广泛可用

此功能已成熟，可在许多设备和浏览器版本上运行。它自以下时间起在所有浏览器中可用： 2015 年 7 月.

background-clip CSS 属性设置元素的背景是否延伸到其边框框、填充框或内容框下方。

试一下

如果元素没有 background-image 或 background-color，此属性仅在边框具有透明区域或部分不透明区域（由于 border-style 或 border-image）时才会产生视觉效果；否则，边框会掩盖差异。

注意：由于 根元素 具有不同的背景绘制区域，因此在根元素上指定 background-clip 属性不会产生任何影响。请参阅“特殊元素的背景。”

注意：对于 根元素 为 HTML 元素的文档：如果根元素上 background-image 的计算值为 none，并且其 background-color 为 transparent，用户代理必须改为从该元素的第一个 HTML <body> 子元素传播 background 属性的计算值。该 <body> 元素的 background 属性的已用值是其初始值，并且传播的值被视为在根元素上指定。建议 HTML 文档的作者为 <body> 元素而不是 HTML 元素指定画布背景。

语法

css
/* Keyword values */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* Global values */
background-clip: inherit;
background-clip: initial;
background-clip: revert;
background-clip: revert-layer;
background-clip: unset;

值

border-box

背景延伸到边框的外部边缘（但在 z 轴排序中位于边框下方）。

padding-box

背景延伸到填充的外部边缘。边框下方没有绘制背景。

content-box

背景绘制在内容框内（剪裁到内容框）。

text

背景绘制在前景文本内（剪裁到前景文本）。

无障碍

使用 background-clip: text 时，请检查背景颜色与放置在其上的文本颜色之间的对比度比率是否足够高，以使视力较低的人能够阅读页面内容。

如果背景图像未加载，这也可能导致文本变得不可读。添加一个回退 background-color 来防止这种情况发生，并在没有图像的情况下进行测试。

考虑使用 @supports 中的功能查询来测试对 background-clip: text 的支持，并在不支持的情况下提供无障碍替代方案。

正式定义

初始值border-box
应用于所有元素。它也适用于 ::first-letter 和 ::first-line。
继承否
计算值如指定
动画类型可重复列表

正式语法

background-clip = 
  <visual-box>#  

<visual-box> = 
  content-box  |
  padding-box  |
  border-box

示例

HTML

html
<p class="border-box">The background extends behind the border.</p>
<p class="padding-box">
  The background extends to the inside edge of the border.
</p>
<p class="content-box">
  The background extends only to the edge of the content box.
</p>
<p class="text">The background is clipped to the foreground text.</p>

CSS

css
p {
  border: 0.8em darkviolet;
  border-style: dotted double;
  margin: 1em 0;
  padding: 1.4em;
  background: linear-gradient(60deg, red, yellow, red, yellow, red);
  font: 900 1.2em sans-serif;
  text-decoration: underline;
}

.border-box {
  background-clip: border-box;
}
.padding-box {
  background-clip: padding-box;
}
.content-box {
  background-clip: content-box;
}

.text {
  background-clip: text;
  color: rgb(0 0 0 / 20%);
}

结果

规范

规范
CSS 背景和边框模块级别 3
# background-clip

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参见