【36:blend-mode 】CSSブレンドモードで画像と色を重ね合わせる
プロジェクトNo.36:blend-mode - DEMO
複数の背景画像や色などを重ね合わせることができるCSSの機能「ブレンドモード」。
ただ単に重ね合さるだけではなく、色々な効果を与えることができます。
言葉で説明するのが難しいのでまずはDEMOをご覧ください。
基本的な使い方
実装は簡単でbackgroundの指定時に複数の色もしくは画像などを指定して、
background-blend-modeプロパティを追加するだけです。
CSS
body { background: #0bd url(img/bg.jpg) no-repeat; background-blend-mode: multiply; }
豊富なブレンドの種類
background-blend-modeプロパティに指定できる値は以下の通り。
- multiply(乗算)
- overlay(オーバーレイ)
- darken(暗く)
- lighten(明るく)
- color-dodge(覆い焼きカラー)
- color-burn(焼き込みカラー)
- hard-light(ハードライト)
- soft-light(ソフトライト)
- difference(差の絶対値)
- exclusion(除外)
- hue(色相)
- saturation(彩度)
- color(カラー)
- luminosity(輝度)
それぞれの効果はDEMOで確認してください。