MARKLEAPS[マークリープス]

TECH BLOG

マークリープス技術ブログ

open

css 短い記述で背景画像を透過させる方法

背景画像を透過にする場合、背景画像を表示するdivの中に透過の背景色を表示するdivを入れ子にする等して透過させることが出来ます。

今回は、divの入れ子を使わずに背景画像を透過にする方法をご紹介します。

 

・html

・透過させない状態

 

白っぽく透過

・css

 

ポイント
background: url で背景画像を指定
background-color: rgba で白透過の背景色を指定
background-blend-mode: lighten; で背景画像と背景色を明るくブレンドする

 

background-blend-modeは背景画像と背景画像のブレンドを行うことができます。

 

黒っぽく透過

・css

 

ポイント
background: url で背景画像を指定
background-color: rgba で黒透過の背景色を指定
background-blend-mode: darken; で背景画像と背景色を暗くブレンドする

 

よく読まれている関連記事

関連最新記事