画像に効果を設定するcss(ブレンドモード)

乗算やオーバーレイといった効果を画像に設定する。
background プロパティで複数の画像をカンマで区切ると、画像同士のブレンドも可能。
尚、IEには全般対応指定ないほか、Safariブラウザも効果タイプによっては対応していない。

body {
  background: #0bd url(beach-footprint.jpg) no-repeat;
  background-blend-mode: screen;
}

ブレンドモードの種類
・multiply(乗算)
・screen(スクリーン)
・overlay(オーバーレイ)
・darken(暗く)
・lighten(明るく)
・color-dodge(覆い焼きカラー)
・color-burn(焼き込みカラー)
・hard-light(ハードライト)
・soft-light(ソフトライト)
・difference(差の絶対値)
・exclusion(除外)
・hue(色相)
 ※Safari非対応
・saturation(彩度)
 ※Safari非対応
・color(カラー)
 ※Safari非対応
・luminosity(輝度)
 ※Safari非対応

参考サイト

Webクリエイターボックス
CSSブレンドモードで画像を彩ろう
http://www.webcreatorbox.com/tech/css-blend-mode/