background-clip

CSS の background-clip プロパティは、要素の背景の <color> または <image> を境界の下まで拡張するかどうかを設定します。

要素に background-image 又は background-color がない場合、このプロパティは (border-style 又は border-image によって) 境界に透明な領域や部分的に不透明な領域がある場合のみ視覚効果があります。そうでなければ、境界は異なるマスク方法になります。

構文

/* キーワード値 */
background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;

/* グローバル値 */
background-clip: inherit;
background-clip: initial;
background-clip: unset;

border-box
背景を境界の外側の辺まで拡張します (但し、境界の下に重ね合わせられます)。
padding-box
背景をパディングの外側の辺まで拡張します。境界の下には背景が描かれません。
content-box
背景をコンテンツボックスの中に (切り取って) 表示します。
text
背景を前景のテキストの中に (切り取って) 表示します。

形式文法

<box>#

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

HTML

<p class="border-box">背景が境界の裏まで拡張されます。</p>
<p class="padding-box">背景が境界の内側の縁まで拡張されます。</p>
<p class="content-box">背景がコンテンツボックスの縁までだけ表示されます。</p>
<p class="text">背景が前景のテキストで切り取られます。</p>

CSS

p {
  border: .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;
  -webkit-background-clip: text;
  color: rgba(0,0,0,.2);
}

結果

仕様書

仕様書 状態 備考
CSS Backgrounds and Borders Module Level 3
background-clip の定義
勧告候補 初回定義
CSS Backgrounds and Borders Module Level 4
background-clip の定義
編集者草案 text の値を追加。
初期値border-box
適用対象すべての要素。 ::first-letter and ::first-line にも適用されます。
継承なし
メディア視覚
計算値指定値
アニメーションの種類個別
正規順序形式文法で定義される一意のあいまいでない順序

ブラウザーの対応

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
background-clipChrome 完全対応 1
完全対応 1
未対応 1 — 64
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Chrome accepts alternate synonyms to its values: padding, border, and content.
Edge 完全対応 12Firefox 完全対応 4
完全対応 4
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
未対応 1 — 4
接頭辞付き 補足
接頭辞付き -moz- のベンダー接頭辞が必要
補足 Used the -moz-background-clip: padding | border syntax.
IE 完全対応 9
補足
完全対応 9
補足
補足 In IE 7 and IE 8 of Internet Explorer, this property always behaved like background-clip: padding when overflow was hidden, auto, or scroll.
Opera 完全対応 10.5
完全対応 10.5
未対応 15 — 51
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Opera accepts alternate synonyms to its values: padding, border, and content.
Safari 完全対応 3
接頭辞付き 補足
完全対応 3
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari accepts alternate synonyms to its values: padding, border, and content.
WebView Android 完全対応 4.1
完全対応 4.1
未対応 ≤37 — 64
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 WebView accepts alternate synonyms to its values: padding, border, and content.
Chrome Android 完全対応 18
完全対応 18
未対応 18 — 64
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Chrome accepts alternate synonyms to its values: padding, border, and content.
Firefox Android 完全対応 14
完全対応 14
完全対応 49
接頭辞付き
接頭辞付き -webkit- のベンダー接頭辞が必要
Opera Android 完全対応 11
完全対応 11
未対応 14 — 47
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Opera accepts alternate synonyms to its values: padding, border, and content.
Safari iOS 完全対応 1
接頭辞付き 補足
完全対応 1
接頭辞付き 補足
接頭辞付き -webkit- のベンダー接頭辞が必要
補足 Safari accepts alternate synonyms to its values: padding, border, and content.
Samsung Internet Android 完全対応 1.0
content-boxChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 4IE 完全対応 9
補足
完全対応 9
補足
補足 In IE 7 and IE 9 of Internet Explorer, it always behaved like background-clip: padding if overflow: hidden | auto | scroll
Opera 完全対応 10.5Safari 完全対応 3WebView Android 完全対応 4.1Chrome Android 完全対応 18Firefox Android 完全対応 14Opera Android 完全対応 11Safari iOS 完全対応 1Samsung Internet Android 完全対応 1.0
text
実験的
Chrome 部分対応 3
補足
部分対応 3
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.
Edge 完全対応 15
完全対応 15
部分対応 12
補足
補足 Before Edge 15, this value was supported with the prefixed version of the property only.
Firefox 完全対応 49
完全対応 49
完全対応 48
無効
無効 From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 部分対応 15
補足
部分対応 15
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari 部分対応 4
補足
部分対応 4
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.
WebView Android 部分対応 ≤37
補足
部分対応 ≤37
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.
Chrome Android 部分対応 18
補足
部分対応 18
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.
Firefox Android 完全対応 49
完全対応 49
完全対応 48
無効
無効 From version 48: this feature is behind the layout.css.background-clip-text.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android 部分対応 14
補足
部分対応 14
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.
Safari iOS 部分対応 3.2
補足
部分対応 3.2
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.
Samsung Internet Android 部分対応 1.0
補足
部分対応 1.0
補足
補足 This value is supported with the prefixed version of the property only.
補足 According to the WebKit blog, text decorations or shadows are not included in the clipping.

凡例

完全対応  
完全対応
部分対応  
部分対応
未対応  
未対応
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
実装ノートを参照してください。
実装ノートを参照してください。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
使用するには、ベンダー接頭辞または異なる名前が必要です。
使用するには、ベンダー接頭辞または異なる名前が必要です。

関連情報