When jquery changes the opacity of PNG under ie8, black edges appear, and the solution for png transparency under ie6_html/css

When jquery changes the opacity of PNG under ie8, black edges appear, and the solution for png transparency under ie6_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:41:51

Original

1107 people have browsed it

At present, the Internet has higher and higher requirements for web page effects. It is inevitable to use PNG images. PNG is divided into several formats, PNG8 PNG24 PNG32, the most commonly used one is also the display effect and size comparison. The moderate one is PNG24, which supports translucency, transparency, and has very rich colors. However, because most of our Chinese people use the IE series or the browsers with IE as the core series, and because WINDOWS XP has a relatively large market share in the domestic market, and XP Many people on the Internet are still using IE6 IE7 IE8 and other browsers, and these browsers have more or less gaps in their PNG support. IE6 does not support PNG at all, and IE7 IE8 supports PNG incompletely. Under IE7 IE8, the image changes to transparent. When drawing, there will be a black border extending from the transparent area of PNG. If there is translucency, the entire translucent area will be black. This is unacceptable for pages that require beautiful appearance. After some research, I found that Use PNG as the background and use Microsoft's unique filter to load the image, which can solve the problem of IE6 not supporting PNG, and can also solve the problem of black edges when using the JQUERY animation transparency effect under IE7 and IE8. The code has the real image, as follows:

<script>function correctPNG() {    var arVersion = navigator.appVersion.split("MSIE")    var version = parseFloat(arVersion[1])    if ((version >= 5.5) && (document.body.filters)) {        var lee_i = 0;        var docimgs=document.images;        for (var j = 0; j < docimgs.length; j++) {            var img = docimgs[j]            var imgName = img.src.toUpperCase();            if (imgName.substring(imgName.length - 3, imgName.length) == "PNG" && !img.getAttribute("usemap")) {                lee_i++;                var SpanID = img.id || 'ra_png_' + lee_i.toString();                var imgData = new Image();                imgData.proData = SpanID;                imgData.onload = function () {                    $("#" + this.proData).css("width", this.width + "px").css("height", this.height + "px");                }                imgData.src = img.src;                var imgID = "id='" + SpanID + "' ";                var imgClass = (img.className) ? "class='" + img.className + "' " : ""                var imgTitle = (img.title) ? "title='" + img.title + "' " : "title='" + img.alt + "' "                var imgStyle = "display:inline-block;" + img.style.cssText                if (img.align == "left") imgStyle = "float:left;" + imgStyle                if (img.align == "right") imgStyle = "float:right;" + imgStyle                if (img.parentElement.href) imgStyle = "cursor:hand;" + imgStyle                var strNewHTML = "<span " + imgID + imgClass + imgTitle             + " style=\"" + "width:" + img.width + "px; height:" + img.height + "px;" + imgStyle + ";"             + "filter:progid:DXImageTransform.Microsoft.AlphaImageLoader"             + "(src=\'" + img.src + "\', sizingMethod='scale');\"></span>"                img.outerHTML = strNewHTML;                j = j - 1;            }        }    }}//判断是否为IE8及以下浏览器，其实除了这三个浏览器不支持addEventListener，其它浏览器都没问题if (typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined") {    window.attachEvent("onload", correctPNG);}</script>

Copy after login

Reference the jquery1.8 class library before the end tag of /body of the page, and then add the above code. There will be no problem displaying PNG24 in IE6 7 8. If you need to execute When animate animation or obtaining pictures, it is found that PNG pictures cannot be found under IE 6 7 8, or there is no response when changing their positions and transparency. The reason is that correctPNG replaces the IMG tags of all PNGs on the page. SPAN tag, and then use filter: progid:DXImageTransform.Microsoft.AlphaImageLoader on the SPAN tag to load the PNG image. Therefore, the recommended approach is to include the image in a DIV. Only one IMG tag is allowed in this DIV, and then add the DIV Perform position or transparency related operations, for example:

<div id='test'><img src='xxxx.png'/></div><script>$("#test").animate({opacity:0.2,marginLeft:500},1000,function(){alert('run complete');});</script>

Copy after login

Another situation is that in addition to transparency and displacement, I also need to change the width and height of this image. For this situation, I recommend the following method:

<div id='test'><img src='xxxx.png'/></div><script>$($("#test span")[0]||$("#test img")[0]).animate({opacity:0.2,marginLeft:500,width:'500px',height:'500px'},1000,function(){alert('run complete');});</script>

Copy after login

BUG: Under IE7 and IE8, if you dynamically modify the transparency of a png image, for example, if you apply a fadeIn, When the transparency of the image is adjusted to 25%, a very strange bug will appear. The transparent information of the png will be gone! It turned into a very ugly black color!

Solution to the bug that the background of png images turns black under IE7 and IE8:

1. Do not directly change the transparency of the image, but put a container for the image to modify the transparency of the container

For example, the original code is:

Modify it to: < ;div class="share-list-icon-shadow">

2. Give this container Adding a background color

Under normal circumstances, the bug will be solved at this point. If you still have problems, please see below:

3. Add zoom: 1 to the container

What does zoom: 1 do? Why does IE have this bug?

These are two questions, but actually one answer. IE modifies transparency not through css attributes, but through filter , so if you want to understand this bug, you must find the reason from the filter. When filter acts on an object, the object must be tangible, that is, it must be a layout. IE has a very special attribute: hasLayout. This attribute can be given to the container as a layout. The attribute hasLayout is a bit weird. , you cannot start it by directly writing css, but must start it through javascript. In fact, there is another way to start it, which is to use a special css attribute to start hasLayout in disguise. This css attribute is zoom (other attributes For example, display:inline-block, float:left, etc. will also work, but only zoom has no side effects)