[CSS] background-clip – Meowriosity[ミャリオシティ]

CSS の background-clip は、背景画像の要素内での適用範囲を設定するプロパティです。

background-imageと組み合わせてショートハンド(一括指定) background を利用できます。

background-clip Code DEMO

background-clip:content-box;
background-clipで
背景を表示する
範囲が変わります
background-clip:padding-box;
background-clipで
背景を表示する
範囲が変わります
background-clip:border-box;
background-clipで
背景を表示する
範囲が変わります
background-clip:text; -webkit-background-clip: text; color: transparent;
background-clipで
背景を表示する
範囲が変わります
共通code background-image: url(img/2737.png); border: dotted 15px #fec803; padding: 15px;

他の値を持つ場合があります。詳細は以下をご確認下さい

background-clipは、背景画像、及び、背景色に適用されます。

content-box: content-box

背景は、paddingの内側まで表示される
padding-box (初期値): padding-box

背景は、paddingの外側 (borderの内側) まで表示される
border-box: border-box

背景は、borderの外端まで表示される
文字の型抜き: text

柄付文字やグラデーション文字にする事ができる
文字色優先の為、「color: transparent;」で文字を透明にする必要がある
要プレフィックス (-webkit-)

複数の背景画像を利用している場合
カンマ ‘ , ‘ で繋ぐことで、背景ごとに位置を指定する事ができます。
左(最初に書かれたもの)が一番上、右に行くほど下の画像に対応します。

background-image: url(img/sanple1.png), url(img/sanple2.png),; 
background-clip: content-box, border-box;

IE非対応。ベンダープレフィックス -webkit- が必要です
-webkit-background-clip: text;

※より詳細な情報、最新情報、他バージョン対応などを確認されたい場合は Can I use 等のチェックサイトでお調べ下さいm(__)m