透過PNG
IE6以前で透過PNGを表示する方法。
・http://www.twinhelix.com/css/iepngfix/からダウンロード
・透過したいスタイルにビヘイビアの記述をする。
<style type="text/css"> img, div { behavior:url(iepngfix.htc) } </style>
この場合、imgタグとdivタグのpngファイルを透過するようになる。
ただし、背景に使用した場合、画像が繰り返されない。
ので、繰り返しが必要な場合は、次のハックを利用する。(参考サイト)
div { background: transparent url(./background.png) repeat-y left top !important; background: none; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./background.png", sizingMethod="scale"); }
こんな感じ?
sizingMethodは画像の貼り付け方法で、scaleは要素にあわせて画像を拡大縮小、cropはそのままだそうです。
これらの方法に問題があるとすれば、ブロック要素に貼り付けた場合、中のリンクが無効化されてしまうということ。
対処法としては、aタグにposition:relativeを設定するというのがあるが、親要素もposition設定していると、やっぱり無効化されてしまう。