グラデーションテキストが作れるbackground-clip

背景をどの領域まで表示させるのかを指定する「background-clip」というプロパティがあります。

background-originプロパティとよく似ていますが、background-originがbackground-imageについて作用するのと異なり、background-clipはbackground-color・ background-image両方に作用します。

background-clipには4種類の値を設定できます。

境界線や余白に対する背景表示範囲を考慮できる

<div>
  <p>吾輩は猫である</p>
</div>
div {
  padding: 30px ;
  background: red ;
  border: 10px solid rgba(0, 0, 0, 0.3) ;
}

たとえばこんなhtml&cssがあったとすると、通常、背景色の赤は余白も含めた要素全体に表示されます。

吾輩は猫である

borderを透過しているので分かるかと思いますが、borderの下にも背景領域は広がっています

ここで、「background-clip: padding-box」を指定してやると、borderは背景対象外となり、borderを除いた要素に背景が指定されます。

吾輩は猫である

borderの背景色がなくなったのが分かると思います。

つづいて値に content-box を指定するとpaddingの余白も対象外となり、今度はコンテンツ部分だけが背景の対象となります。

吾輩は猫である

さらにさらに、値に text を指定し、テキスト部分を透過させることで、テキスト部分のみに背景が適用され、あとは背景なしとなります。

吾輩は猫である

div{
  background-clip: text;
}
p{
 color: transparent;
}

プレビューを見て気付きましたが、background-clip: text; を指定したときborderに背景が適用されていますね。初めて知りました。(ブラウザによって異なる模様)

背景が単色ではなくグラデーションだと、透過させたテキストもグラデーションにできます。

吾輩は猫である

background-attachment:fixed;が指定されている場合は、background-clip:text;を使用できませんので注意。
端折ってましたが、background-clipの初期値は「border-box」です。

background-clipの値まとめ

  • 初期値:border-box
  • borderに背景なし:padding-box
  • コンテンツだけに背景:content-box
  • テキストとborderだけに背景:text

下はbackground-clipを利用したサンプルです。

See the Pen
background-clip css
by Takashi Abe (@TakeshiAbe)
on CodePen.

23:40まで受講できるから、仕事と両立できるHTML5/CSS3コース[オンライン]

2020年2月9日HTML/CSSbackground-clip,css

Posted by ミフネWEB