试一试
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
color: transparent;
text-shadow: none;
<section id="default-example">
<div id="example-element">This is the content of the element.</div>
</section>
#example-element {
background-image: url("/shared-assets/images/examples/leopard.jpg");
color: white;
text-shadow: 2px 2px black;
padding: 20px;
border: 10px dashed #333333;
font-size: 2em;
font-weight: bold;
}
背景始终绘制在边框后面，因此 background-clip: border-box 只有当边框部分不透明或具有透明或部分不透明区域时才具有视觉效果。此外，如果文本完全或部分不透明，background-clip: text 属性几乎没有视觉效果。
注意：对于其根元素为 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;
background-clip: border-area;
/* 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-
背景在内容盒内部绘制（裁剪到内容盒）。
文本-
背景在前景文本内部绘制（裁剪到前景文本）。
边框区域-
背景在边框绘制区域内部绘制（裁剪到边框绘制区域），考虑了
border-width和border-style，但忽略了border-color引入的任何透明度。
无障碍
使用 background-clip: text 时，请检查背景颜色与覆盖在其上的文本颜色之间的对比度是否足够高，以便视力低下的人能够阅读页面内容。
如果背景图片未加载，也可能导致文本无法阅读。添加一个备用background-color以防止这种情况发生，并在没有图片的情况下进行测试。
考虑使用带有@supports的特性查询来测试 background-clip: text 的支持情况，并在不支持时提供可访问的替代方案。
正式定义
| 初始值 | border-box |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 否 |
| 计算值 | 同指定值 |
| 动画类型 | 一个可重复的列表 |
正式语法
background-clip =
<bg-clip>#
<bg-clip> =
<visual-box> |
[ border-area || text ]
<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>
<p class="border-area">
The background is clipped to the area painted by the border.
</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%);
}
.border-area {
background-clip: border-area;
border-color: transparent;
}
结果
规范
| 规范 |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS 背景模块第 4 级 # background-clip |
浏览器兼容性
加载中…
另见
clip-path属性创建一个裁剪区域，定义整个元素的哪个部分应该显示。- 背景属性：
background、background-color、background-image、background-origin - CSS 盒模型简介