Background(背景)

[CSS] background-clip

この記事は最終更新から2年以上経過しており、内容が古い可能性があります

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

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

同じテーマの記事
このページの目次
  1. background-clip の詳細
    1. 利用できる値
    2. ブラウザ対応状況 (2020/07 現在)
      1. content-box
      2. text

background-clip Code DEMO

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

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

background-clip の詳細

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

利用できる値

content-box
content-box

背景は、paddingの内側まで表示される

padding-box (初期値)
padding-box

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

border-box
border-box

背景は、borderの外端まで表示される

文字の型抜き
text

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

background-clip の複数指定

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

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

background-clip 設定時の注意

  • 値で背景画像の適用範囲は変わりますが、画像自体の拡縮は行わず、はみ出した部分は切り取られます。

  • box-sizingの指定に関わらず、背景はbackground-clipの設定(値)が適用されます。

ブラウザ対応状況 (2020/07 現在)

content-box

text

  • ×

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

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

同じテーマの記事