「-ms-filter」プロパティを使用するときに PNG アルファの透明度を維持する方法
-
05-07-2019 - |
質問
次の HTML があります。
<a><img src="myfile.png" /> Some text</a>
そしてこのCSS:
a:hover
{
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);
opacity: .75;
}
この問題は IE 8 と IE 7 の両方で発生します。
PNG画像が対象となる場合 -ms-フィルター または フィルター, 、そのアルファ透明度は台無しになります。試してみればわかります。これは IE 8 と IE 7 の両方のバグです。
CSS に適用されている「-ms-opacity」と「filter」プロパティを削除できますか?これの構文は何ですか?(例えば。何かのようなもの -ms-フィルター:"";)
この問題の回避策を知っている人はいますか?
解決
UPDATE: AlphaImageLoader フィルターは、imgに直接適用される場合がありますアルファフィルター。フィルターの削除に関しては、 filter:none;
を試しましたか?
はい、プログラムでIE6以下を条件付きコメントでターゲットにします。
<!--[if lt IE 7]>
<style>a:hover{filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=75);}</style>
<![endif]-->
IE7-js などのスクリプトも、PNG透明度を乱雑にすることなく処理します。非標準コードでCSSをセットアップします。
<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->
他のヒント
SpliFFの答えを装飾するだけで、次のjQueryをページに追加することでこの問題を修正できます。
$(function() {
if (jQuery.browser.msie)
$('img[src$=".png"]').each(function() { // must have quotes around .png
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
});
});
これにより、ページ内のすべてのPNGにもAlphaImageLoaderが適用されます。
別の答えを探している人のために、私はプレーンな JavaScript で自分で書いた次のコードを使用してこれを解決しました。そのため、フレームワークに依存しません。それでも、それをフレームワークの DOM Ready イベント内に配置する必要があります (または、私のように domready.js を使用することもできます)。AlphaImageLoader を使用して、.PNG 拡張子を持つすべての画像を読み込みます。これは、アルファ フィルターを適用する前に行う必要があります (JS を使用してこのコードの後にフィルターを適用することもできます)。
以下のコード:
var i;
for (i in document.images) {
if (document.images[i].src) {
var imgSrc = document.images[i].src;
if (imgSrc.toLowerCase().substr(imgSrc.length-4) === '.png') {
document.images[i].style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + imgSrc + "')";
}
}
}
IE の場合は、必ず条件付きコメントの中に入れてください。
<!--[if IE]><![endif]-->
うまくいったかどうか教えてください。敬具!