Webサイトの背景に画像を設定したとき、「画像に色を重ねたい」「背景の雰囲気を変えたい」と思ったことはありませんか？
CSSでは、背景画像と背景色を組み合わせることで、画像の色合いや見え方を調整できます。
例えば、写真にブランドカラーを重ねたり、模様のある背景を落ち着いた色合いにしたりすることが可能です。
この記事では、background-imageとbackground-colorの併用方法、background-blend-modeによる色の重ね方を解説します。
background-imageとbackground-colorは併用できる？
CSSでは、背景画像と背景色を同じ要素に指定できます。
ただし、両方を指定するだけでは、必ずしも画像と色が混ざるわけではありません。まずは基本的な仕組みを確認しましょう。
背景画像と背景色を同時に指定する
背景画像と背景色は、次のように記述できます。
.box {
background-image: url("../images/bg.png");
background-color: #e85b5b;
}この場合、背景画像は背景色より手前に描画されます。
画像に透明な部分があれば、その部分から背景色が見えます。一方、不透明な画像では、背景色が画像の下に隠れてしまいます。
そのため、背景色を指定しただけでは、画像全体の色合いが変わらないことがあります。
背景画像と背景色を混ぜたい場合
不透明な背景画像にも色を重ねて見せたい場合は、background-blend-modeが便利です。
このプロパティは、背景画像と背景色などをどのように合成するかを指定します。
.box {
background-image: url("../images/bg.png");
background-color: #e85b5b;
background-blend-mode: multiply;
}このように指定すると、画像と背景色が乗算という方法で合成されます。
単に色を背面に置くのではなく、画像と色を混ぜて表示したいときに使用するプロパティです。
background-blend-modeの基本的な使い方
background-blend-modeには、複数の合成方法が用意されています。
指定する値によって、背景画像の明るさや色の印象が変化します。ここでは代表的な値を紹介します。
multiplyで背景画像と色を乗算する
multiplyは、背景画像と背景色を乗算して合成する指定です。
.section {
background-image: url("../images/pattern.png");
background-color: #e85b5b;
background-blend-mode: multiply;
}乗算では、一般的に元の画像より暗い仕上がりになります。
白い部分には背景色が反映されやすく、黒い部分は黒く残るため、白地に黒い模様がある画像などにも利用できます。
ただし、元画像の色によっては、想像以上に暗くなったり、色が強く出たりすることがあります。
soft-lightで柔らかく色を重ねる
soft-lightは、画像と背景色を柔らかな光で照らしたように合成する指定です。
.section {
background-image: url("../images/bg.jpg");
background-color: #e85b5b;
background-blend-mode: soft-light;
}multiplyと比較すると、柔らかい印象の仕上がりになる場合があります。
ただし、画像と背景色の組み合わせによっては、模様のコントラストが弱くなり、見えにくくなることもあります。
代表的な合成方法を整理すると、次のとおりです。
| 指定値 | 主な特徴 |
|---|---|
normal | 合成せず通常どおり表示する |
multiply | 色を乗算し、暗い仕上がりになりやすい |
screen | 明るい仕上がりになりやすい |
overlay | 明暗のコントラストを強調する |
soft-light | 柔らかな明暗の変化を加える |
どの指定が適しているかは、元画像と背景色によって異なります。
実際の表示を確認しながら選びましょう。
背景画像と色を重ねるときの注意点
background-blend-modeは便利ですが、すべての画像で同じような結果になるわけではありません。
思いどおりの色にならない場合は、元画像の状態や、使用している合成方法を確認することが大切です。
元画像の色によって仕上がりが変わる
例えば、白地に黒い模様がある画像と、すでに色が付いている写真では、同じmultiplyでも結果が異なります。
また、soft-lightを指定すると、背景色と画像の明るさによっては模様が目立たなくなる場合があります。
そのため、合成方法を変えれば必ず希望の色になるとは限りません。
背景画像の色合いやコントラストも含めて調整しましょう。
背景画像だけを薄くしたい場合は別の方法を使う
背景画像の透明度を下げたい場合、background-blend-modeだけでは細かな調整が難しいことがあります。
また、要素自体にopacityを指定すると、背景だけでなく文字やボタンなども透明になってしまいます。
背景画像だけの透明度を調整したい場合は、::beforeなどの疑似要素に背景画像を設定し、その疑似要素にopacityを指定する方法があります。
色を混ぜる処理と、透明度を調整する処理は別のものとして考えると理解しやすくなります。
【まとめ】背景画像と背景色は合成方法で印象が変わる
CSSでは、background-imageとbackground-colorを同じ要素に指定できます。
さらに、background-blend-modeを使うことで、背景画像と背景色を合成し、色合いや明るさを変えることができます。
特に、multiplyやsoft-lightは、背景の印象を調整したいときに試しやすい指定です。
.section {
background-image: url("../images/bg.jpg");
background-color: #e85b5b;
background-blend-mode: multiply;
}ただし、仕上がりは元画像の色や明るさによって変化します。
背景画像と背景色の組み合わせを確認しながら、目的に合った合成方法を選びましょう。