みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験から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フォローしてもらえると嬉しいです🦈