PNGのフレームの上にJPEGやGIFの画像を被せれるCSS
2007年5月18日
PNGのフレームの上にJPEGやGIF等の画像を被せるPNG OverlayというCSSの技法をご紹介します。これはJPEGやGIFといった画像にマスクのような感じでPNGのフレームに乗せる事ができるCSSのTIPSです。
用途はギャラリーなどでわざわざ毎回PNGでドロップシャドウの効果などを作成しなくても、一枚のPNGの上にJPEGやGIFを被せてドロップシャドウなどの効果を作ることができます。ブログなどで写真をUPロードする際にドロップシャドウの効果をつけたい時などにも使えますね。もちろんIE6にも対応です。
(X)HTML
(X)HTMLは以下のようにdiv.pan_frameの上にJPEGやGIFなどの画像を乗せる感じ。
<div class="pan_wrap"> <img src="img/pan_1.jpg" alt="panoramic" /> <div class="pan_frame"> </div> </div>
CSS
CSSは以下のようにPNGのフレームがposition: absoluteで親要素のすぐ下に被ってくるように指定するのがミソですね。
.pan_wrap
{
background: url(../img/pan_checks.gif) repeat;
margin: 0 auto 15px;
position: relative;
width: 650px;
height: 210px;
}
*html .pan_frame
{
background: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/pan_frame.png', sizingMethod='crop');
}
.pan_frame
{
background: url(../img/pan_frame.png) no-repeat;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
width: 650px;
height: 210px;
}
この程度の表現ならわざわざJavascriptに頼らなくてもCSSでできるんですね。CSSはやっぱり奥が深くておもしろいですね。とりあえず愛犬の写真で挑戦してみました。可愛いですね～。
