【HTML】画像にマットを敷こう!【CSS】

HTML-CSS

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています!

1分で理解できるHTML/CSS講座シリーズです。

今回は画像にマットを敷く方法について学んでいきましょう!

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!

この記事を読むと・・・
  • 画像にマットを敷くことが出来る
1分で理解できるHTML/CSS講座シリーズはじめっ!

マットとは

画像の上テキストを表示する際に、文字が見やすくするために
画像の上に敷く半透明の要素です。

マットを敷いてみよう

See the Pen
Untitled
by samehack (@samehack)
on CodePen.

このように疑似要素::afterを使って記述することで、マットを敷く事ができます。

・画像の上にマット
・マットの更に上にテキスト
が重なっているような作りとなっています。

/* 親要素に対し、絶対位置に配置 */
position: absolute;
top: 0; /* 上から0px */
left: 0; /* 左から0px */
width: 100%; /* 親要素の100% */
height: 100%; /* 親要素の100% */

ポイントはこの部分です。
このように記述することで、親要素をマットをぴったり重ねることができます。

あと忘れやすいのですが、contentの設定は必須です

さらに、このままだとテキストが見えない状態なので、
z-indexを指定して、テキストを前面に持ってきてあげれば完成です

position: relative;
z-index: 1; /* 前面へ */
画像にマットを敷けるようになってえらい!

画像にグラデーションのマットを敷いてみよう

ここでは疑似要素は使わず、背景画像設定時に直接
マットを敷く方法を試してみましょう。

See the Pen
matte2
by samehack (@samehack)
on CodePen.


このように、linear-gradient()を使用することで、
背景画像設定時にグラデーションのマットを敷くことができました。

まとめ

  • マットは画像の上に敷く半透明の要素
  • 疑似要素::afterを使って実現が可能
  • 文字を乗せる場合は、z-indexを設定する

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

タイトルとURLをコピーしました