one's way blog

ワクワクを生み出せるWebエンジニアを目指して。

【36:blend-mode 】CSSブレンドモードで画像と色を重ね合わせる

f:id:seintoseiya:20150820085459p:plain
プロジェクト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で確認してください。

全ソースはこちら

github.com