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

このプロパティ策定にはAdobeのスタッフが加わっているようで、ブレンドモードの値の名称がPhotoshopと同じで、Photoshopユーザーには判りやすいものになっています。

サンプルは、横が画像サイズのdiv要素に画像を表示し、そのdiv内でテキストを絶対配置によって画像の上に表示しています。

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

Conifer
百万石 受注システム

(2)mix-blend-mode : overlay 文字色:white

Conifer
百万石 受注システム

(3)mix-blend-mode : screen 文字色:green

Conifer
百万石 受注システム

(4)mix-blend-mode : difference(差の絶対値) 文字色:orange

Conifer
百万石 受注システム

(2)の場合のhtmlソース

<div id="blend">
    <img src="img3/blend-bg.png" width="648">
    <div class="readtxt1">Conifer<br>百万石&nbsp;受注システム</div>
</div>

(2)の場合のCSSソース

#blend {
	width:648px;
	margin:0 auto 20px auto;
	position:relative;
	}
#blend img {
	margin:0;
	padding:0;
	}
.readtxt0,.readtxt1,.readtxt2,.readtxt3 { 
	position: absolute;
	top:15px; 
	left:46px; 
	color: #fff; 
	font-size:60px; 
	line-height:1.3;
	font-weight: bold;
	}
.readtxt1 { 
	mix-blend-mode : overlay; 
	}
テキストの代わりに、SVG画像をのせたサンプルはこちらです。