CSSとpng画像を使ってjpg画像をマスク表示する方法 DAD UNION

CSSとpng画像を使ってjpg画像をマスク表示する方法をご紹介します。
png画像をレイヤーとして重ねて、レイヤー下のjpg画像をマスク表示します。
（JsのプラグインやブラウザによってはCSSだけでも出来た様な気がしますが）

Contents

CSSとpng画像を使ってjpg画像をマスク表示するために用意した画像
CSSとpng画像を使ってjpg画像をマスク表示するCSSの記述
CSSとpng画像を使ってjpg画像をマスク表示するHTMLの記述
CSSとpng画像でjpg画像をマスクするデモページ

CSSとpng画像を使ってjpg画像をマスク表示するために用意した画像

透過のpng画像

マスクされるjpg画像

CSSとpng画像を使ってjpg画像をマスク表示するCSSの記述

※#photoエリアを用意して、その上レイヤーとして.photo-maskエリア（背景に画像を設定）を用意します。

<style type="text/css">
<!--
body{
	margin:0;
	padding:0;
}
h1{
	text-align:center;
	font-size:18px;
	font-weight:bold;
	padding:10px 0 15px 0;
	line-height:1.4em;
	text-align:center;
}
.clWrap{
	width:750px;
	margin:0 auto;
}
#photo {
	position: relative;
	display: block;
	width: 152px;
	height: 152px;
	margin:0 auto;
}
#photo .photo-mask{
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 152px;
	height: 152px;
	background:url(mask.png);
}
-->  
</style>

CSSとpng画像を使ってjpg画像をマスク表示するHTMLの記述

※id=”photo”エリアを用意してimg画像を用意し、その上レイヤーとしてclass=”photo-mask”エリア（背景に画像を設定）を設定します。

<div id="idWrap">
<div id="idContents">

	<h1>png画像を上のレイヤーにし、下のjpg画像をマスク表示</h1>
    <div id="photo">
        <span class="photo-mask"></span>
        <img src="i01.jpg" alt="" width="152" height="152" />
    </div><!--/photo-->

</div><!--/idContents-->

</div><!--/idWrap-->