كيفية الحفاظ على شفافية PNG ألفا عند استخدام خاصية "-MS-Filter"

Question

لدي 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-Filter أو منقي, ، شفافية ألفا دمر. جربها وسترى. إنه خطأ في كل من IE 8 و IE 7.

هل يمكنني إزالة خصائص "-MS-Opacity" و "Filter" المطبقة في CSS؟ ما هو بناء الجملة لهذا؟ (مثل شيء مثل -MS-Filter: "" ؛)

هل يعرف أي شخص العمل حول هذه القضية؟

Answer 1

تحديث: 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]-->

Answer 2

ما عليك سوى تزيين إجابة 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')";
        });
});

سيطبق هذا alphaimageLoader أيضًا جميع PNGs في الصفحة.

Answer 3

بالنسبة للأشخاص الذين يبحثون عن إجابة أخرى ، قمت بحل هذا باستخدام هذا الرمز التالي ، كتبت نفسي في JavaScript Plain ، لذلك فهو إطار مستقل. لا يزال يتعين عليك وضعه داخل حدث DOM الخاص بـ Framework (أو يمكنك استخدام DomReady.js كما فعلت). يقوم بتحميل جميع الصور مع امتداد .png مع AlphaimageLoader. يجب أن يتم ذلك قبل تطبيق مرشح ألفا (يمكنك تطبيق المرشح بعد هذا الرمز مع 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]-->

واسمحوا لي أن أعرف إذا كان الأمر جيدًا. أطيب التحيات!