Daily happenings, XHTML, CSS, MT, WP, Web, a memo, etc…

PNG24形式の透過画像

PNG24形式の透過画像は、アルファチャンネル(半透明)のグラフィックを扱うことができ、背景を自然に溶け込ませたデザインが可能ですが、IE6、それ以前のバージョンは、透過部分が灰色っぽくなり、透過PNGを表示することができません。

png24

IE独自の機能であるDirectXを使用すると、透過PNGを表示することができます。

XHTML

<h3 id="alpha1"><img src="<$MTBlogURL$>img/recententries.png" width="115px" height="20px" alt="Recent Entries" /></h3>

CSS

h3#alpha1 {
width: 115px;
height: 20px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="&lt;$MTBlogURL$&gt;img/recententries.png",sizingMethod="scale");
}
h3#alpha1 img {
display: none;
}

幅と高さを指定し、フィルターを使用してPNG画像を読み込みます。
このままではimgタグで指定した画像が表示されるので、imgタグを非表示にします。

IE7はPNG24形式の透過画像に対応しているので、IE7以下のバージョンだけに適応させるために条件分岐コメントを使い、外部CSSを読み込んでいます。

<!--[if lt IE 7]>
<link rel="stylesheet" href="<$MTBlogURL$>ie.css" type="text/css" media="screen" />
<![endif]-->