現状もっともシェアの高いIE6で透明・透過png画像をCSSを使って表示する方法。

24ビットの透過png画像というのは非常に優秀で、
レイヤーなどで上に表示させてもちゃんと透明度を維持して表示することが出来ます。
グラフィカルなページを作る上でさまざまな場所で活用できると思います。
実際このブログのLOGO画像も透明png画像を使っています。

それでは白背景に透明グラデーションをかけた画像を表示させます。
以下の画像はIE6では透明表示が正常にできていません。

コード

<style>
#img1{
width: 200px;/* 画像の横サイズ */
height: 50px;/* 画像の縦サイズ */
background-repeat: no-repeat;
}
html>body #img1{/* IE6以外に適用 IE7も含む */
background-image:url(alpha.png);
}
*html body #img1{/* IE6以下に適用 */
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png', sizingMethod='scale');
}
</style>
<div id="img1"></div>

表示結果

This entry was posted on 火曜日, 8月 21st, 2007 at 16:17:12 and is filed under Css.You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.