こんにちは！さくです！
web制作をしていると
「背景画像を透過したいなぁ」とか「背景を薄くしたい！」
というシチュエーションに多く遭遇すると思いますが、google先生に方法を尋ねると【div要素を重ねて上から透過レイヤーを掛ける】という冗長な方法が散見されます。
background-imageは要素ではないのでopacityは適用されません。よって、ここではblend-modeを活用します。
サンプル
css-lighten-sample
background-image: url("room_syosai.png");
background-color: rgba(255, 255, 255, 0.8);
background-blend-mode: lighten;
結果
css-darken-sample
background-image: url("room_syosai.png");
background-color: rgba(0, 0, 0, 0.6);
background-blend-mode: darken;
結果
blend-modeとは事前に用意された背景色あるいは背景画像を効果を与えて合成する機能です。
たったの三行で背景透過が実現できました。div要素を使って〜よりかは遥かに少ない行数で望んだ結果が得られたかと思います。
またblend-modeには他にも十数種類のブレンド方式が存在します
blend-modeについて、詳しくはこちら
HTMLクイックリファレンス様
http://www.htmq.com/css/background-blend-mode.shtml
グラデーション
blend-modeとは違いますがグラデーションを重ねる方法も紹介したいと思います。
css-gradation-sample
background: linear-gradient(315deg, rgba(250, 68, 101, 0.6), rgba(105, 188, 200, 0.6)) ,url(room_syosai.png);
linear-gradientを使ってたったの一行で画像にグラデーションを掛けることができました。
linear-gradientについて、詳しくはこちら
MDN web docs様
https://developer.mozilla.org/ja/docs/Web/CSS/linear-gradient
最後に
簡単に背景画像を透過する方法を紹介しました。どちらの機能もデザイン面の検証を行う際捗る機能です。
皆さんのweb開発の一助となれれば幸いです！
twitter→(@saku_nectaris)
フォローよろしくな！