CSS3の「mix-blend-mode」プロパティを使うことで、Photoshopなどと同じようなレイヤー階層画像を重ねたときの見え方を調整できます。

CSS3 mix-blend-modeを使って、レイヤー画像合成(1)」では、背景画像とその上に置いたテキストとでブレンドしましたが、今回はテキストの代りにベクターのSVG画像を乗せてみました。

テキストのときと同様に、「overlay」、「screen」、「difference」を試しました。

(1)mix-blend-mode 指定無し

(2)mix-blend-mode : overlay

(3)mix-blend-mode : screen

(4)mix-blend-mode : difference(差の絶対値)

(2)の場合のhtmlソース

<div id="blend">
    <img src="img3/blend-bg.png" width="648">
    <img class="read01" src="svg/012b.svg" width="250">
</div>

(2)の場合のCSSソース

#blend {
	width:648px;
	margin:0 auto 20px auto;
	position:relative;
	}
#blend img {
	margin:0;
	padding:0;
	}
.read00,.read01,.read02,.read03 { 
	position: absolute;
	top:55px; 
	left:46px; 
	z-index:1;
	}
.read01 { 
	mix-blend-mode : overlay; 
	}