Internet Explorer 6 で PNG 画像に透過性を持たせるためのいくつかの修正を見てきましたが、CSS で背景位置を設定できるようにする修正をまだ見つけていません。スプライトを使用する場合、それは契約違反です。私は、GIF (それほど高品質ではない) を使用するか、透明な画像をまったく使用しないか、または IE6 とはまったく異なるスタイルシートを提供することに頼りました。PNG 透明度と背景の配置を可能にする IE6 の修正はありますか?
6 に答える
はい。インデックス付きパレット(png256)を使用するように画像を変換します。透明度(gifのように)をサポートできますが、アルファチャネルはサポートできません。
これは、 Irfanviewとpngoutプラグイン、pngquantまたはpngnqを使用して実行できます。
YUIパフォーマンスチームは、他の多くの画像最適化の概念をカバーする素晴らしいプレゼンテーションも行いました。
これは、先月かそこらで登場した新しいテクニックです。ページから:
このスクリプトでは、空白のスペーサー GIF を使用する場合と使用しない場合の両方で画像タグがサポートされています。また、背景画像の PNG は、配置されているコンテンツ要素よりも小さい場合でも、配置したり、繰り返したりすることができます。
DD_belatedPNG.jsは非常にうまく機能します
背景が静的な場合、TweakPNGを使用して、PNG の Background Color チャンクを (デフォルトの灰色ではなく) 正しい色に変更します。通常のブラウザーは、アルファ チャネルが無効にするため、これを無視しますが、IE6 以前では、アルファ チャネルの代わりにその色を使用します。
これは、IE7+ では透明性があり、IE6 以前では適切に劣化していることを意味します。また、すべての CSS の配置と繰り返しが可能です (ハックがないためです!)。
実際には、純粋な CSS を使用して、IE6 のアルファ フィルターと CSSclip
プロパティを利用することにより、IE6 でアルファ透明度を使用して配置された背景画像を取得できます。Julien Lecomteがブログでこの手法について説明しています。
この手法では、アルファ フィルターを使用するたびにパフォーマンスが低下することに注意してください。
IE PNG Fix v2.0は、完全な alpha+ position
/をサポートしていrepeat
ます。