CSSのbackground-blend-modeを使って画像と背景色をブレンドする方法

今回はCSSのbackground-blend-modeを使って画像と背景色をブレンドする方法を紹介します。

 

使い方

CSSで指定する際は以下のようにして使います。

div.sample {
    background:#f00 url("img/picture.jpg") no-repeat;
    background-blend-mode:multiply;
}

 

background-colorとbackground-imageを指定して、background-blend-mode: multiplyでブレンドする感じです。

値は以下のようになっています。

  • normal:通常 … ブレンドしない(初期値)
  • multiply:乗算 … 半分ずつ混ぜたような結果となる
  • screen:スクリーン … スクリーンを重ねたような(光を掛け合わせたような)結果となる
  • overlay:オーバーレイ … 下レイヤー色に応じて、乗算、または、スクリーンで合成する。下レイヤー色が暗い色なら乗算でより暗く合成され、下レイヤー色が明るい色ならスクリーンでより明るく合成される
  • darken:比較(暗) … 下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の低い(暗い)色を採用する
  • lighten:比較(明) … 下レイヤー色と上レイヤー色のそれぞれのRGB値を比較して、よりRGB値の高い(明るい)色を採用する
  • color-dodge:覆い焼き … 明るい色はより明るくなり、画面は明るくコントラストは強くなる
  • color-burn:焼き込み … 暗い色はより暗くなり、画面は濃くコントラストは強くなる
  • hard-light:ハードライト … 下レイヤー色と上レイヤー色の合成色に応じて、乗算、または、スクリーンで合成する。明るい色はスクリーンでより明るく、暗い色は乗算でより暗くなるため、強いライトを当てたような効果となる
  • soft-light:ソフトライト … 下レイヤー色と上レイヤー色の合成色に応じて、覆い焼き、または、焼き込みで合成する。明るい色は覆い焼きでより明るく、暗い色は焼き込みでより暗くなるため、ソフトなライトを当てたような効果となる
  • difference:差の絶対値 … 下レイヤー色と上レイヤー色を比較して、数値の高い(明るい)ほうから低い(暗い)ほうを引く。白を掛け合わせると反転するが、黒を掛け合わせても変化しないため、部分的に反転したような結果となる
  • exclusion:除外 … difference と似た結果となるが、よりコントラストが弱い
  • hue:色相 … 下レイヤー色の輝度と彩度、および、上レイヤー色の色相を組み合わせた結果となる
  • saturation:彩度 … 下レイヤー色の輝度と色相、および、上レイヤー色の彩度を組み合わせた結果となる
  • color:カラー … 下レイヤー色の輝度、および、上レイヤー色の色相と彩度を組み合わせた結果となる
  • luminosity:輝度 … 下レイヤー色の色相と彩度、および、上レイヤー色の輝度を組み合わせた結果となる

 

この説明だけだとわかりづらいかもしれないので、以下のサイトで実際にそれぞれの値を試すことができます。

http://shanabrian.com/web/css3/multiple-backgrounds-blend-modes.php

 

Photoshopを使わなくてもここまでできるCSSはやっぱり凄いですね。

色の付け方によってはかなりサイトにおしゃれな雰囲気が出るので、試してみてください。