background-clip
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2015年7月.
* Some parts of this feature may have varying levels of support.
background-clip は CSS のプロパティで、要素の背景を境界ボックス、パディングボックス、コンテンツボックスのどれまで拡張するかを設定します。
試してみましょう
background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; color: transparent; <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: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333; font-size: 2em; font-weight: bold; } 背景は常に境界線の背後に描画されるため、 background-clip: border-box は、境界線が部分的に透明であるか、透明または半透明な領域がある場合にのみ視覚的な効果があります。また、 background-clip: text プロパティは、テキストが透明または半透明な場合、視覚的な効果はほとんどありません。
メモ: ルート要素が HTML 要素である文書の場合、ルート要素上の background-image の計算値が none であり、その background-color が transparent であると、ユーザーエージェントは代わりに、 background プロパティの計算値をその要素の HTML の <body> の子要素から伝搬させなければなりません。その <body> 要素の background プロパティの使用値はその初期値であり、伝搬された値は、それらがルート要素上で指定されたかのように扱われます。 HTML 文書を作成するときは、 HTML 要素ではなく、 <body> 要素にキャンバスの背景を指定することを推奨します。
構文
/* キーワード値 */ background-clip: border-box; background-clip: padding-box; background-clip: content-box; background-clip: text; background-clip: border-area; /* グローバル値 */ background-clip: inherit; background-clip: initial; background-clip: revert; background-clip: revert-layer; background-clip: unset; 値
border-box-
背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
padding-box-
背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
content-box-
背景をコンテンツボックスの中に (切り取って) 表示します。
text-
背景を前景のテキストの中に (切り取って) 表示します。
border-area-
背景は、境界線によって描かれた領域内に描かれ（切り取られ）、
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
<p class="border-box">背景が境界の裏まで拡張されます。</p> <p class="padding-box"> 背景が境界の内側の縁まで拡張されます。 </p> <p class="content-box"> 背景がコンテンツボックスの縁までだしか表示されません。 </p> <p class="text">背景が前景のテキストで切り取られます。</p> <p class="border-area"> 背景は境界線によって描かれた領域で切り取られます。 </p> 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; } 結果
仕様書
| Specification |
|---|
| CSS Backgrounds and Borders Module Level 3 # background-clip |
| CSS Backgrounds Module Level 4 # background-clip |
ブラウザーの互換性
関連情報
clip-pathプロパティは要素全体を表示する部分を定義するクリッピング領域を作成します。- 背景のプロパティ:
background,background-color,background-image,background-origin - CSS ボックスモデルの紹介