png画像を上のレイヤーとして、下のjpg画像をマスク表示して見ます。
(JsのプラグインやブラウザによってはCSSだけでも出来た様な気がしますが)
1.用意する画像
透過のpng画像
マスクされる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="i01.jpg" alt="" width="152" height="152"> </div> <!--/photo-->
マスク処理された画像を使えば良い様に思いますが、下のjpg画像のポジションをJavaScritptで移動させたりすれば、何か用途もありそうな予感がします。