CSSのblend-modeを使い、複数の画像やカラーを重ねてPhotoshopのレイヤーと描画モードを利用した合成のような効果を作ります。 サンプルは、花の画像を背景に使い、その上に青色を付けたdiv要素（分かりやすくやや小さめ）を載せています。初期状態で花の画像のblend-modeはnoneになっていて、画像の下側のボタンでblend-modeを切り替えます。ボタンの名称がそれぞれblend-modeの値になっています。効果作成はCSSのみでおこなっていますが、ボタンによる値の切り替えにJavaScriptを使っています。

効果名：通常（初期）、darken（比較・暗）、multiply（乗算）、color-burn（焼き込みカラー）、lighten（比較・明）、screen（スクリーン）、color-dodge（覆い焼きカラー）、overlay（オーバーレイ）、soft-light（ソフトライト）、hard-light（ハードライト）、difference（差の絶対値）、exclusion（除外）、hue（色相）、saturation（彩度）、color（カラー）、luminosity（輝度）。

htmlソース

<div id="image-wrap">
	<div id="upper"></div>
</div>
<div id="btn">
	<ul>
		<li><button id="darken">darken</button></li>
		<li><button id="multiply">multiply</button></li>
		<li><button id="color-burn">color-burn</button></li>
		<li><button id="lighten">lighten</button></li>
		<li><button id="screen">screen</button></li>
		<li><button id="color-dodge">color-dodge</button></li>
		<li><button id="overlay">overlay</button></li>
		<li><button id="soft-light">soft-light</button></li>
		<li><button id="hard-light">hard-light</button></li>
		<li><button id="difference">difference</button></li>
		<li><button id="exclusion">exclusion</button></li>
		<li><button id="hue">hue</button></li>
		<li><button id="saturation">saturation</button></li>
		<li><button id="color">color</button></li>
		<li><button id="luminosity">luminosity</button></li>
	</ul>
</div>

CSSソース

div#image-wrap {
	width:600px;
	height:370px;
	margin:10px auto;
	position:relative;
	background:url(img3/hana600.png);
	}
div#upper {
	width:580px;
	height:350px;
	position:relative;
	background:#0460f8;
	top:10px;
	left:10px;
	mix-blend-mode: none;
	}

Scriptソース

$(function(){
	$("#darken").on('click',function(){
		$("#upper").css('mix-blend-mode','darken');
		$("#status").text('darken（比較・暗）');
	});
				/* 中略 */ 
	$("#luminosity").on('click',function(){
		$("#upper").css('mix-blend-mode','luminosity');
		$("#status").text('luminosity（輝度）');
	});
});