CSSでブログデザイン

IE6で半透明PNGを使った角丸のリキッドボックスは作れるのか？

条件はJavaScriptを使わないこと。

問題はbackground-positionが設定できないため右端の画像を配置できない。

しかし意外な方法で解決することができました。


詳細はこちらから
IE6対応半透明PNG角丸リキッドボックス　別窓で開く

前回IE6で透過PNG画像を表示させる方法を書きましたが、今回はメニューの背景画像などをロールオーバーさせる方法です。

よくあるマウスONとマウスOUTの画像をひとつにまとめて作成し、背景画像のポジションチェンジによって画像が入れ替わったように見せるあれです。

IE6で透過PNG画像を使うときは背景画像のポジションが指定できないので無理かと思ってたのですが、画像が入った要素（ボックス）自体を動かしてやれば可能なことに気が付きました。

詳細はこちらから
IE6の透過PNGメニューロールオーバー

今回のテンプレ「png」にも使っているように、透過PNGに対応していないIE6できちんと透過させる方法です。

参考サイト
１、CSS TIPS 「アルファ画像を表示する」
２、[to-R] 「アルファ画像を扱うalphafilter.jsライブラリ」
３、ユンサンの／융상의／YungSang's 「透過PNG と IE と IE7」

１は直接Styleを指定して表示させる方法。
２と３は外部ファイルを利用してページ内のPNG画像を自動的に判別して透過処理を行なう方法です。

ブログのテンプレ作成時にはひとつひとつ指定したほうがやりやすかったので、１の方法を参考にしました。
この方法はJavaScriptがOFFになっていてもActiveXがOFF（セキュリティーレベル高）になっていなければ表示できます。

詳しい解説はこちら
IE6で背景画像に透過PNGを使用する

前回の書き込みで透過PNGの話を少ししましたが、透過PNGの実力はあれだけではありません。

今はIE6が90%近くのシェアを占めているので、窓から外の風景を眺めるような表現はGIFを使わないとできませんでした。
しかしIE7のシェアが上がってくれば、同じことをPNGを使って表現できるようになります。

どのくらい差があるかはこちらを見てください。
透過PNGの例２