こんにちは。
30度を超す日もあり初夏の趣きもあるこの頃ですが、
CSS3のブレンドモード（描画モード）にはまっております。
いいですね。ブレンドモード。
繰り返しの透過の背景画像なんかに利用しています。
上のボディビルダーの画像もブレンドモードです。
ブレンドモード（描画モード）は非デザイナーは聞き慣れないかもしれませんが、Photoshopなどでおなじみの機能で、デザイナーなら割と日常的に使っている機能です。
2つ以上の画像またはカラーを重ねあわせて、いろいろな描画表現ができます。今まで効果を加えた画像は、その状態で準備する必要があったんですが、CSS3で描画モードを使えば不要になるということですね。
さっそく、サンプル一覧を作成しましたのでご覧ください。
デモ・サンプル
左が通常の状態、右が各ブレンドモードを適用させた状態です。
それぞれ、同じ画像を重ねたり背景色をつけたりして、効果をわかりやすくしています。
CSSコード
/* ブレンドモード */
.multiply { mix-blend-mode: multiply; } /* 乗算 */
.screen { mix-blend-mode: screen; } /* スクリーン */
.overlay { mix-blend-mode: overlay; } /* オーバーレイ */
.color-burn { mix-blend-mode: color-burn; } /* 焼き込み */
.color-dodge { mix-blend-mode: color-dodge; } /* 覆い焼き */
.soft-light { mix-blend-mode: soft-light; } /* ソフトライト */
.hard-light { mix-blend-mode: hard-light; } /* ハードライト */
.darken { mix-blend-mode: darken; } /* 比較（暗） */
.lighten { mix-blend-mode: lighten; } /* 比較（明） */
.difference { mix-blend-mode: difference; } /* 差の絶対値 */
.exclusion { mix-blend-mode: exclusion; } /* 除外 */
.hue { mix-blend-mode: hue; } /* 色相 */
.saturation { mix-blend-mode: saturation; } /* 彩度 */
.color { mix-blend-mode: color; } /* カラー */
.luminosity { mix-blend-mode: luminosity; } /* 輝度 */
テキストや画像などの要素に直接適用できる「 mix-blend-mode 」と、
背景に適用できる「 background-blend-mode 」とがあります。
/* 背景ブレンドモード */
.bg-multiply { background-blend-mode: multiply; } /* 乗算 */
.bg-screen { background-blend-mode: screen; } /* スクリーン */
.bg-overlay { background-blend-mode: overlay; } /* オーバーレイ */
.bg-color-burn { background-blend-mode: color-burn; } /* 焼き込み */
.bg-color-dodge { background-blend-mode: color-dodge; } /* 覆い焼き */
.bg-soft-light { background-blend-mode: soft-light; } /* ソフトライト */
.bg-hard-light { background-blend-mode: hard-light; } /* ハードライト */
.bg-darken { background-blend-mode: darken; } /* 比較（暗） */
.bg-lighten { background-blend-mode: lighten; } /* 比較（明） */
.bg-difference { background-blend-mode: difference; } /* 差の絶対値 */
.bg-exclusion { background-blend-mode: exclusion; } /* 除外 */
.bg-hue { background-blend-mode: hue; } /* 色相 */
.bg-saturation { background-blend-mode: saturation; } /* 彩度 */
.bg-color { background-blend-mode: color; } /* カラー */
.bg-luminosity { background-blend-mode: luminosity; } /* 輝度 */
opacityとかrgbaで透過させることで微妙なフィルター効果も再現できると思います。うまく使い分ければ、君もベテランブレンダーや！
各ブラウザの対応状況も進んできています。
最近は画像も大きく使うことが増えてきたので、
一手間効果を加えるだけで印象アップできることうけあいです。
是非、参考になさってください。
デモ・サンプル
参考サイト
https://blog.cntlog.net/archives/952
以上