画像に効果を設定する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/