IEのPNG：部分的に透明な画像の不透明度を切り替えますか？

Question

部分的に透明なPNG画像ファイルがあります。私はその不透明度を切り替える必要があります。

現在、私は不透明度を可能にするために、以下のCSSコードを使用しています：

filter:alpha(opacity=50);

をしかし、IEはトラブルPNGの透明部分を処理しています。私は、以下のCSSを追加して、それを修正しようとすると：

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='../images/translucent_effect.png', sizing Method='scale');

まあ、それは動作しません。私の質問は、人々がこの問題に気づいた最良の解決策は何ですか？ PNGをGIFに変換するだけですか？または、より洗練されたソリューションがありますか？

ありがとうございました。

Answer 1

IEのfilterスタイルは恐ろしい混乱です。ブラウザは、そうでなければその範囲外になるいくつかのトリックを行うことができますが、それは非標準であり、いくつかの重大な問題があります。

私はあなたの完全なCSSを見ることなく、特定することはできませんが、あなたは filter最大の「の落とし穴」癖の一つによってキャッチされてきたかのように私には見えます

：

あなたはより多くを指定する必要がある場合1つのフィルタよりも、それらを一緒に指定する必要があります。あなたの例で行ったように別々に指定すると、実際には完全に異なるアクションを実行していても、2番目のfilterが最初のものを上書きします。これはCSSスタイルシートが一般的に機能する方法と実際には一致していますが、filterができる範囲のために直観に反するものです。

単一のfilterスタイルで複数のフィルタをスペースで区切って指定できます。

参考のためにここを参照してください：あなたはスタイルシート上の別のクラス名によってトリガ異なる効果を持つようにしたい場合は、このアプローチにはhttp://msdn.microsoft.com/en-us/library/ms532847%28v=vs.85%29.aspx

問題は、明白である - さまざまなソースからのフィルタを結合する方法はありませんので、同じ要素に入れます。

progid:構文で書かれたフィルタは実際には無効なCSSなので、IE以外のブラウザではスタイルシート全体がチョークしてしまうことがあります。これは、省略形の構文（最初の例ではalpha()フィルタ）、IE6とIE7、または-ms-filterの代わりに長い構文を使用して引用符で囲むことで防ぐことができます。

ここでは例です：

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50) progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../images/translucent_effect.png', sizing Method='scale');" 

お役に立てば幸いです。