CSSとpng画像でjpg画像をマスク表示してみる



png画像を上のレイヤーとして、下のjpg画像をマスク表示して見ます。
(JsのプラグインやブラウザによってはCSSだけでも出来た様な気がしますが)

1.用意する画像

透過のpng画像
透過png画像

マスクされるjpg画像
マスクされるjpg画像

2.CSSの記述例

<style type="text/css">
<!--
#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>

3.HTMLの記述例

    <div id="photo">
        <span class="photo-mask"></span>
        <img src="/wp-content/plugins/wp-ogp/default.jpg" alt="WEBエンジニアの隠れたファインプレー | BLINDER HIDDEN" width="152" height="152" />
    </div><!--/photo-->

CSSとpng画像でjpg画像をマスクするデモ

マスク処理された画像を使えば良い様に思いますが、
マスクされるjpg画像のポジションをJavaScritptで移動させたりできると
何か用途もありそうな予感がします。