昔は主にレイアウトを整える役割というイメージが強かった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-blend-mode」のブラウザ対応状況
IEにのみ対応していないことが少なからずネックだった「background-blend-mode」ですが、2022年6月にIEのサポートが終了となった現在、主要ブラウザはPC、スマホどちらも一通り対応している状況となりました。
以上、background-imageを透明にするためのCSSでした。
