How to solve/hack fading semi-transparent PNG bug

2019-01-04 09:33发布

站内问答 / jQuery
1705 14 4

As you know, IE6 has bug that can't display semi-transparent PNG file without using non-standard style like filter. In IE7, this problem is fixed. But It still has some bug about PNG file. It can't correctly display fading semi-transparent PNG file. You can clearly see it when you use show/hide function in jQuery with semi-transparent PNG file. The background of image is displayed with non-transparent black color.

Do you have any idea for solve this question by using jQuery.

Update

Let's see my testing

alt text http://rabu4g.bay.livefilestore.com/y1pGVXLwPdkxudYLmIdnMpWTP_9up-8isxbPKX945Ui4ITnYWnR0msaa2NmUF-qJ-Q4a2AAGaiGHwaFSgR1HeplDIO0bWbyRODI/bug.png

As you see, IE8 always incorrectly displays PNG-24 image. Moreover, IE8 still correctly display PNG-8 image when I fade(jQuery.fadeOut function) it only. But It incorrectly display PNG-8 image when I fade & resize(jQuery.hide function) at the same time.

PS. You can download my testing source code from here.

Thanks,

14条回答
太酷不给撩
2楼-- · 2019-01-04 10:14

This can be done similar to what Stu has done here: http://www.cssplay.co.uk/menus/flyout_horizontal.html

查看更多
0人赞 添加讨论(0) 举报
Summer. ? 凉城
3楼-- · 2019-01-04 10:18

Im having the same annoying problem with IE8 and IE7.. anyone tested if Cmc solutions does the trick?

My url is http://www.onlinebrand.dk (Top menu fades in, like Google :) But IE don't care.)

EDIT: Just tested it myself, and even if I set width and height of, well the repeating img. It doesn't work

I just found another work around, where Fadein a wrapper instead of the div with the .png bg image. And it sort of worked, Im now getting som sort of transparency in IE, but also, some padding/margin..Totally wierd..

Bill Gates, Whats up with this? Why can't we get along?

查看更多
0人赞 添加讨论(0) 举报
欢心
4楼-- · 2019-01-04 10:20

i use a modified PNG fix for IE6 it works just great:

(function ($) {
if (!$) return;
$.fn.extend({
    fixPNG: function(sizingMethod, forceBG) {
            if (!($.browser.msie)) return this;
            var emptyimg = "x.gif"; //Path to empty 1x1px GIF goes here
            sizingMethod = sizingMethod || "scale"; //sizingMethod, defaults to scale (matches image dimensions)
            this.each(function() {
                    var isImg = (forceBG) ? false : jQuery.nodeName(this, "img"),
                            imgname = (isImg) ? this.src : this.currentStyle.backgroundImage,
                            src = (isImg) ? imgname : imgname.substring(5,imgname.length-2);
                    this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + src + "', sizingMethod='" + sizingMethod + "')";
                    if (isImg) this.src = emptyimg;
                    else this.style.backgroundImage = "url(" + emptyimg + ")";
            });
            return this;
    }
});
})(jQuery);

dont forget to upload x.gif. (a transparent 1x1 gif)

查看更多
0人赞 添加讨论(0) 举报
beautiful°
5楼-- · 2019-01-04 10:20

Use Unit PNG Fix for semitransparent png-24.

查看更多
0人赞 添加讨论(0) 举报
甜甜的少女心
6楼-- · 2019-01-04 10:21

The root cause of the problem appears to be Micrsoft IE's poor support for the PNG alpha-transparency (in any version of IE). IE6 is the worst offender by far, rendering alpha-transparent pixels as a pale blue color. IE7 and IE8 handle PNG alpha-transparency, but can't handle changing the opacity of an alpha-transparent pixel in the PNG – they render as black instead of transparent.

My own fixes for this depend on the situation. Here are some approaches:

  1. Just use a GIF. GIFs won't appear as smooth (because of limited color depth), but the pixels are fully transparent.
  2. Use the IE PNG fix available here: http://git.twinhelix.com/cgit/iepngfix/ -- open up index.html and read the comments.
  3. Animate motion, but don't animate opacity of PNG images.
  4. Conditionally do any or all of the above using either JavaScript tests, conditional comments, or the MSIE-only "behavior" extension to CSS. Here's how any of that might work:

Conditional comments:

<!-- in index.html, in the <head>: -->
<!--[if IE 6]>
<link rel="stylesheet" src="css/ie6only.css" />
<![endif]-->

In the css:

/* ie6only.css */
img { behavior: url("js/iepngfix.htc"); }

Via JavaScript detection:

<script defer type="text/javascript">
if(navigator.appName == "Microsoft Internet Explorer")
{ /* Do IE-specific stuff here */ }
else
{ /* Non-IE-compatible stuff here */ }
</script>

The iepngfix.htc behavior works by replacing the PNG with a blank image (blank.gif) and then using Microsoft's DXImageTransform routines to load the PNG as a filter on the blank image. There are other PNG fixes out there which work by wrapping things in divs or spans, but those will often break your layout, so I avoid them.

Hope this helps.

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
7楼-- · 2019-01-04 10:21

I just found the way to solve problem by chance when I try to fix IE8 bug in the following image.

enter image description here

The easiest way, You just define background of current image like the below code. Or you can see full source code and demo on my JsFiddle

#img2
{
    background:#fff;   
}

However, if you have some complex image like my bug, you should try to add almost invisible layer below your image and set background color to some color that you like.

enter image description here

查看更多
0人赞 添加讨论(0) 举报
1 2 3 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)