2020年4月22日

background-imageを透明にするためのCSS

昔は主にレイアウトを整える役割というイメージが強かったCSSですが、近年はアニメーションさせる事も出来るようになったり、表現の幅が広がってきていますよね。

表現の一つとしてよく使用するのが、透明度を指定する「opacity」がありますが、今回はbackground-imageで指定した背景画像に透明度を指定する方法を書いてみます。

使用するのは「background-image」「background-color」「background-blend-mode」

例えば以下のようなHTMLがあるとします。

テキスト

これに対して、以下のように背景画像を指定するとします。

.image{
background-image: url("画像パス");
}

まずopacityを指定した例を考えてみます。

.image{
background-image: url("画像パス");
opacity: 0.5;
}

このようにopacityを指定すると、「テキスト」も含め半透明になってしまいますね。そのため、背景画像だけを半透明にしたい場合、以下のように指定します。

.image{
background-image: url("画像パス");
background-color:rgba(255,255,255,0.5);
background-blend-mode:lighten;
}

半透明のべた塗りをブレンドする、というイメージ

解説しますと、まず「background-image」で背景画像を指定、「background-color」でブレンドするための色を指定、「background-blend-mode」でどのようにブレンドするかを指定しています。

この中で見慣れないのは「background-blend-mode」かと思います。これは名称の通りブレンド方法を指定するためのプロパティです。いくつか値があるのですが、「lighten」は明るめのブレンド、「darken」は暗めのブレンド、他にも多くのブレンド方法があります。

先に書いた記述では白っぽい方に半透明の見せ方になりますが、「background-blend-mode:lighten」のまま「background-color:rgba(0,0,0,0.5)」としても、黒っぽい半透明にはなりません。以下のように記述することで、半透明の黒色を被せたような見せ方にも出来ます

.image{
background-image: url("画像パス");
background-color:rgba(0,0,0,0.5);
background-blend-mode:darken;
}

以上、background-imageを透明にするためのCSSでした。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です