CSS3

プロパティ

background-clip

→● mdn

背景の塗り区画。

背景が塗られる区画となる 背景塗り区画 を決定する。層値の構文は次で与えられる：

<box> ⤴

＝border-box
| padding-box
| content-box

border-box ⤴

背景はボーダーボックス内に塗られる。

<DIV style="width:100px;
 background:linear-gradient(60deg,red,yellow,red,yellow,red);
 border:10px dotted #00f;
 padding:10px;
 font-size:30px;
 background-clip:border-box;
">テスト</DIV>

テスト

padding-box ⤴

背景はパディングボックス内に塗られる。

<DIV style="width:100px;
 background:linear-gradient(60deg,red,yellow,red,yellow,red);
 border:10px dotted #00f;
 padding:10px;
 font-size:30px;
 background-clip:padding-box;
">テスト</DIV>

テスト

content-box ⤴

背景は内容ボックス内に塗られる。

<DIV style="width:100px;
 background:linear-gradient(60deg,red,yellow,red,yellow,red);
 border:10px dotted #00f;
 padding:10px;
 font-size:30px;
 background-clip:content-box;
">テスト</DIV>

テスト

text [Edge][Firefox][Firefox for Android] ⤴

背景を前景のテキストの中に（切り取って）表示します。

<DIV style="width:100px;
 background:linear-gradient(60deg,red,yellow,red,yellow,red);
 border:10px dotted #00f;
 padding:10px;
 font-size:30px;
 background-clip:text;
">テスト</DIV>

テスト

<DIV style="width:100px;
 background:linear-gradient(60deg,red,yellow,red,yellow,red);
 border:10px dotted #00f;
 padding:10px;
 font-size:30px;
 background-clip:text;
 -webkit-background-clip:text;
 color:#fff0;
">テスト</DIV>

テスト

¶-webkitが必要で、テキスト色を透明～半透明にしないとだめ。

注記： 根要素については、異なる背景塗り区画を持つので、background-clip プロパティの効果はない。特別な要素の背景を見よ。

注記： 背景は常に、ボーダー（もしあれば）の背後に描かれる。[CSS2] の 積層文脈の詳説を見よ。

¶ background:linear-gradient(60deg,red,yellow,red,yellow,red);
の前に
background-clip プロパティを指定すると効果が出なかった。

テスト