定義と使い方

background-clip属性は、要素の背景（色や画像）をどの範囲まで適用するかを設定します。

border-box、padding-box、content-box、textのいずれかの値を選択し、背景を適用する（クリッピング（切り抜き）、clipping）領域として指定します。

background-clip属性の値に関する用語の説明は以下の通りです。

  • border-box：borderの外側の縁までの領域を指します。
  • padding-box: padding의 가장자리까지의 영역을 의미합니다.
  • content-box：要素の実際の内容が配置される領域です。文字、画像、動画などがここに含まれます。これらコンテンツの外側の縁までの領域を指します。paddingがある場合は、paddingの内側の領域となります。
  • text：テキストの前景（foreground）そのものの形状に合わせた領域を指します。

基本例

デモHTML 
<div>codingEverybody</div>
デモCSS 
div {
    font-size: 2em;
    font-weight: 900;
    text-align: center;
    border: 10px dashed red;  /* borderの外側の縁までの領域がborder-box */
    padding: 30px; /* paddingの外側の縁までの領域がpadding-box
                     paddingの内側の領域がcontent-box */
    background-image: url("flower.jpg");
    background-position: center;
    background-clip: border-box; /* 初期値 */
}
デモを適用してみる：background-clip デモボタンをクリックしてみてください！

ご確認ください！
要素の背景（色や画像）は、常にborderの背面に描画されます。

ルート要素である<html>は、background-clip属性を指定しても効果がありません。

形式構文

CSS 
background-clip: border-box | padding-box | content-box | text

値

background-clip属性の値
border-box 初期値です。
要素の背景がborder-boxまで適用（クリッピング、clipping）されます。
padding-box 要素の背景がpadding-boxまで適用（クリッピング、clipping）されます。
content-box 要素の背景がcontent-boxまで適用（クリッピング、clipping）されます。
text テキストの前景（foreground）そのものの形状に合わせた領域を指します。

border-box、padding-box、content-boxは、要素ボックスのボックスモデル（Box model）を通じて確認できます。

要素ボックスの Box model
要素ボックスの Box model

CSSのボックスモデル（Box model）は、ウェブページで要素の構造とレイアウトを定義する概念です。各HTML要素は、content（内容）、padding（パディング）、border（枠線）、margin（マージン）で構成されています。これらの構成要素が箱の形を成しているため、「ボックスモデル」と呼ばれます。

構文

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

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

形式定義

background-clip属性の形式定義
初期値 border-box
適用要素 すべての要素
継承 いいえ

background-clip: textを使用する

background-clip 属性の値のうち、text は初期の CSS3 の一部として提案されましたが、CSS Backgrounds Module Level 4 では background-clip の値として定義されています。

background-clip: text を使用する際、WebKitベースのブラウザでの互換性のために、ベンダープレフィックスである -webkit- を含めた属性、すなわち -webkit-background-clip を使用する必要がありました。しかし、2024年からはほとんどのブラウザが -webkit- なしの background-clip で text 値をサポートしています。ブラウザの互換性を参照してください。

CSS 
/*
    2024年より前のWebkitベースのブラウザでは
    background-clip: textはサポートされていませんでした。
    ベンダープレフィックスである「-webkit-」を含めて使用する必要がありました。
*/
-webkit-background-clip: text;

/* 2024年からはほとんどのブラウザで
    「-webkit-」なしでtext値をサポートしています。
*/
background-clip: text;

color: transparent と一緒に使用する

background-clip: text 値は、テキストの前景（foreground）そのものの形状に合わせた領域を意味します。
テキストの背景（background）ではありません。このとき、テキストが完全に、または部分的に不透明な場合、視覚的な効果がほとんど、あるいは全くありません。

したがって、background-clip: text が視覚的な効果を発揮するためには、color: transparent を指定して、テキストの色（color）を透明（transparent、Webで使えるカラーネーム一覧 参照）にする必要があります。

CSS 
selector {
    background-clip: text;
    /* テキストの背景が見えるようにするには、
       テキストの色は透明（transparent）である必要があります。 */
    color: transparent;
}

例：テキストにグラデーション効果を与える

HTML 
<div>TEXT</div>
CSS 
div {
    font-size: 50px;
    font-weight: 900;
    background-clip: text;
    color: transparent;
    background-image: linear-gradient(red, blue);
}
実際に適用された様子
background-clipプロパティのブラウザ互換性
プロパティと値
デスクトップ Chrome
Chrome
デスクトップデスクトップ Edge
Edge
デスクトップ Firefox
Firefox
Safari
Safari
background-clip 1 12 4 5
4 -webkit-
text 120
3 -webkit-		 120
79 -webkit-		 49 14
4 -webkit-

caniuse.comで詳しい情報をご確認ください。

Firefoxブラウザでは、background-attachment: fixed が設定されている場合に text 値が機能しないという バグ報告 があります。

仕様書

background-clipプロパティの仕様書
仕様書
background-clip CSS Backgrounds Module Level 4
#background-clip

参考資料

関連項目