« 椅子その後 | メイン | あけおめ地球防衛 »
[ 2006年12月18日 ]
> 透過PNGをwebサイトに組み込む
|
以前書いた透過PNGの記事にトラックバックされていて知りました。 IE系ではアルファの再現性が無くて透過は敬遠されている透過PNGですが、こちらのblogで紹介されている方法でIEの7以外のバージョンでも透過がうまくいくようです。 スクリプト禁止にされているとだめそうだけど、IE7で標準サポートってことは、1～2年もしたら透過GIFに取って代わるかもしれないですね。 |
投稿者 inor : 2006年12月18日 16:45
コメント
inorさん。はじめまして。わたくしのブログ取り上げていただきまして、ありがとうございます。今後ともよろしくおねがいいたします～！
投稿者 designwalker : 2006年12月18日 18:04
スタイルシートの
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader()
というフィルタで実現しているのでスタイルシートのみでも実現できます。
「pngImg」と言うIDを与えたタグの中にイメージを配置。
＜div id="pngImg"＞＜img alt="sonzai.png" src="/sonzai.png" height="59" width="111"＞＜/div＞
該当するIDにフィルタを適用
(IE以外は未対応なので無視される)
#pngImg{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/sonzai.png);
width: 111px;
height: 59px;
}
該当IDの中のイメージを非表示に
（IEでPNGが通常表示されて邪魔だから削除したい）
#pngImg IMG{
display:none;
},
そのままだと、IE以外のブラウザはイメージが非表示のままなので、IE以外は画像を表示したい
（状況依存セレクタ「>」はIE未対応なのでIEは無視される）
#pngImg> IMG{
display:block;
}
投稿者 はるまき : 2006年12月20日 20:37
あうあう、10日以上も放置…すみません
＞designwalkerさん
はじめまして、コメントありがとうございます。こちらこそ今後ともよろしくお願いします。
＞はるまきさん
おお、なんかはいてく～
投稿者 inor : 2006年12月29日 13:18
コメントしてください
サイン・インを確認しました、 . さん。コメントしてください。 (サイン・アウト)
(いままで、ここでコメントしたとがないときは、コメントを表示する前にこのウェブログのオーナーの承認が必要になることがあります。承認されるまではコメントは表示されません。そのときはしばらく待ってください。)