「ウェブサイト」を作成しているときに、背景画像の上に「黒」や「白」をかぶせることで、画像の表示を薄くしたいことってありませんか？
Photoshop などで画像自体を編集すれば簡単ですが、後でかぶせる色を変更する可能性がある場合だと、画像を再編集するのが少し面倒……。
そこで今回は、「CSS」だけで実現する方法について書いていきます。
使用する画像
この画像を、「CSS」だけで「暗く（黒く）」したり、「明るく（白く）」したりしてみます。
実装方法
完成図
HTML
<div class="image-block" id="dark"></div> <div class="image-block" id="light"></div> <div class="image-block" id="original"></div>
CSS
.image-block {
width: 300px;
height: 185px;
background-image: url(bluesky.jpg);
background-size: cover;
}
#dark {
background-blend-mode: overlay;
background-color: rgba(0, 0, 0, 0.5);/* 半透明の黒色 */
}
#light {
background-blend-mode: overlay;
background-color: rgba(255, 255, 255, 0.5);/* 半透明の白色 */
}
background-blend-mode は、その要素にある「背景」の重なり方（描画）を制御するプロパティです。今回の例では、「背景画像」と「背景色」が重なったときの表示の挙動が変わります。
機能としては、Photoshop などの「画像編集アプリ」にある、レイヤーの「ブレンドモード」とだいたい同じです。
background-blend-mode: overlay; は、大雑把にいうと「背景色」を「背景画像」にかぶせて表示したような効果が出ます。
背景色 background-color には、半透明の黒色 rgba(0, 0, 0, 0.5) と半透明の白色 rgba（255, 255, 255, 0.5) をそれぞれ指定しているので、「背景画像」が暗くなったり明るくなったりするわけです。
【余談】 「overlay」の挙動について
今回 background-blend-mode で使った値 overlay は、暗い色と重なるときは multiply 、明るい色と重なるときは screen として機能するブレンドモードです。
つまり、#dark を background-blend-mode: multiply; に、#light を background-blend-mode: screen; にしても、同じ挙動をします。
multiply と screen を使い分けても良いですが、混同する不安がある人は overlay だけ覚えておきましょう。だいたい何とかなります。
【おまけ】 「要素」自体のブレンドモードを変える
上記の例では、一つの要素内で「背景画像」と「背景色」のブレンドモードを変えましたが、「要素」自体のブレンドモードを変えることもできます。
その場合は、mix-blend-mode という CSS プロパティを使いましょう。使用できる「値」は、基本的に background-blend-mode と同じです。
コメント