試一試
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 盒模型簡介