下層ページイメージ

新着情報

背景画像を透過させる

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

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

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

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

 

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

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


« |

こちらの記事もオススメです

新着情報一覧

ホームページ制作にまつわる便利な情報を長野より発信!