CSS3 mix-blend-modeを使って、レイヤー画像合成（２）

サイトマップ

営業日カレンダー

お問い合わせ

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

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

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

次の画像は、Illustratorで作成したSVG画像です。表示サイズは作成時のままの縦横94pxです。ブレンドサンプルでは、それぞれ縦横250pxに拡大しています。
（１）は「mix-blend-mode」の指定無しです。
（２）は「mix-blend-mode : overlay」。
（３）は「mix-blend-mode : screen」。
（４）は「mix-blend-mode : difference（差の絶対値）」。

（１）mix-blend-mode 指定無し

（２）mix-blend-mode : overlay

（３）mix-blend-mode : screen

（４）mix-blend-mode : difference（差の絶対値）

（２）の場合のhtmlソース

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

（２）の場合の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; 
	}