背景画像を透過させる

記事公開日：2021.06.14

背景画像を透過させて画像の上に文字を乗せることは、よくあります。

その場合、これまでは以下のようにしてきました。

<div＝背景画像>
<div=透過部分>
文字とか
</div=透過部分>
</div＝背景画像>

でも、今回のデザインではこのやり方だと、背景画像と透過部分のサイズが合わず困っておりました。
そこで、直接<div＝背景画像>に直接、透過してるように見せる方法を見つけました。

今回参考にさせていただいたサイトです
CSS で背景画像を透過しているように見せる方法

background-blend-mode で darken を指定する方法です。
これなら余計な<div>で挟まなくて良いので、便利です。
有難うございます！