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

MARKLEAPS

2022.07.13

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

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

・html

<div class="wrap01">
    <p>テキスト</p>
</div>

</div>

・透過させない状態

白っぽく透過

・css

.wrap01 {
	width: 600px;
	height: 400px;
	background: url(images/img01.jpg) no-repeat 0px 0px;
	background-size: cover;
	background-color: rgba(255,255,255,0.3);
	background-blend-mode: lighten;
}

.wrap01 {

width: 600px;

height: 400px;

background: url(images/img01.jpg) no-repeat 0px 0px;

background-size: cover;

background-color: rgba(255,255,255,0.3);

background-blend-mode: lighten;

}

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

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

黒っぽく透過

・css

.wrap01 {
	width: 600px;
	height: 400px;
	background: url(images/img01.jpg) no-repeat 0px 0px;
	background-size: cover;
	background-color: rgba(0,0,0,0.3);
	background-blend-mode: darken;
}