PNG-24をIE6で透過表示
透過画像といえばgifと今まで自分の中で決め付けていた感が
ありましたが、最近はpngの凄さにちょっと感激しております。
PNG-24はgifの透過表現に比べ比較にならないほど優れています。
gifは透過といってもドロップシャドウなど入った部分は、背景の
色に依存するため、どうしても仕上がりがうまくいきません。
その点PNG-24は背景色に依存されることなくドロップシャドウの
表現を実現してくれるので、非常にいい感じです。
ただ、PNG-24はIE6で透過した部分に色がついて表示されてしまうと
いう難点があります。
上記の点から、優秀だが使うのを控えていたのですが、どうやら
IE6でもPNG-24を透過表示する方法があるようです。
以下がその方法です。
<div id="gazou" style="height:26px; width:194px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='透過させたいPNGファイル' ,sizingmethod=image);"></div>
filterを使い表示させているところがミソのようですね。
ただし、これはIE6での表示なので、スタイルシートでIE6用として
上記の内容を記述するのがいいかも知れません。
#gazou {
width:194px;
height:26px;
display:block;
background-image:url(images/gazou.png);
}
/* IE6用 ------------------------------------------------ */
* #gazou {
background:none;
width:194px;
height:26px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/gazou.png' ,sizingmethod=image);
}
/* IE6用 ------------------------------------------------ */
gifを使っている方で、透過部分に不満をお持ちの方は、一度試して
みる価値ありです＾＾ｖ
ありましたが、最近はpngの凄さにちょっと感激しております。
PNG-24はgifの透過表現に比べ比較にならないほど優れています。
gifは透過といってもドロップシャドウなど入った部分は、背景の
色に依存するため、どうしても仕上がりがうまくいきません。
その点PNG-24は背景色に依存されることなくドロップシャドウの
表現を実現してくれるので、非常にいい感じです。
ただ、PNG-24はIE6で透過した部分に色がついて表示されてしまうと
いう難点があります。
上記の点から、優秀だが使うのを控えていたのですが、どうやら
IE6でもPNG-24を透過表示する方法があるようです。
以下がその方法です。
<div id="gazou" style="height:26px; width:194px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='透過させたいPNGファイル' ,sizingmethod=image);"></div>
filterを使い表示させているところがミソのようですね。
ただし、これはIE6での表示なので、スタイルシートでIE6用として
上記の内容を記述するのがいいかも知れません。
#gazou {
width:194px;
height:26px;
display:block;
background-image:url(images/gazou.png);
}
/* IE6用 ------------------------------------------------ */
* #gazou {
background:none;
width:194px;
height:26px;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='images/gazou.png' ,sizingmethod=image);
}
/* IE6用 ------------------------------------------------ */
gifを使っている方で、透過部分に不満をお持ちの方は、一度試して
みる価値ありです＾＾ｖ
