CSS3の「mix-blend-mode」プロパティを使うことで、Photoshopなどと同じようなレイヤー階層画像を重ねたときの見え方を調整できます。
このプロパティ策定にはAdobeのスタッフが加わっているようで、ブレンドモードの値の名称がPhotoshopと同じで、Photoshopユーザーには判りやすいものになっています。
サンプルは、横が画像サイズのdiv要素に画像を表示し、そのdiv内でテキストを絶対配置によって画像の上に表示しています。
- （１）は「mix-blend-mode」の指定無しのため、文字色は「white」のままです。
- （２）は「mix-blend-mode : overlay」、文字色は「white」。
- （３）は「mix-blend-mode : screen」、文字色は「green」。
- （４）は「mix-blend-mode : difference（差の絶対値）」、文字色は「orange」。
（１）mix-blend-mode 指定無し
Conifer
百万石 受注システム
（２）mix-blend-mode : overlay 文字色：white
Conifer
百万石 受注システム
（３）mix-blend-mode : screen 文字色：green
Conifer
百万石 受注システム
（４）mix-blend-mode : difference（差の絶対値） 文字色：orange
Conifer
百万石 受注システム
（２）の場合のhtmlソース
<div id="blend">
<img src="img3/blend-bg.png" width="648">
<div class="readtxt1">Conifer<br>百万石 受注システム</div>
</div>
（２）の場合の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;
}
