Geek Answers Handbook

Transparent PNG animation issue in Internet Explorer

CSS code:

#btn{
  background: url(transparent.png) no-repeat;
  filter: alpha(opacity=0);
  -moz-opacity: 0;
  -khtml-opacity: 0;
  opacity: 0;
}

JavaScript / jQuery:

$("#btn").animate({opacity:1,"margin-left":"-25px"});

I have no problem with the code above in Firefox, Chrome and others. But it does not work on any version of Internet Explorer.

The problem is that the PNG image looks strange, the transparent PNG background looks black. When I remove the transparency effect, there is no problem.

What's the solution?

+5
source share
10 answers

, . , IE . . , , PNG IE, jQuery.

+5

jQuery.animate()

, .

$("#btn").animate({opacity:1,"margin-left":"-25px", filter:''});

, CSS.

+11

filter:'' hack jQuery (1.6.1)

+7

, , , , . . Dave Shea : http://mezzoblue.com/archives/2010/05/20/ie8_still_fa/

:

, IE CSS, jQuery IE- AlphaImageLoader . ( , ). , .

DD_belatedPNG, PNG VML AlphaImageLoader. IE6, IE7 . IE8 out X-UA-Compatible meta IE8 IE7 .

. , IE. , , .

Mmmhmmm... , , 6 . , , . , ...

+4

, : http://www.viget.com/inspire/jquery-ie-png-24-ie-black-background-issue-solved/

awfulful black bg png . . ie7 + ie6 .

, :) Julien

+2

PNG- (mozilla, Opera, Chrome ..):

background:url(../images/banner01.png) no-repeat right 13px;

IE ( CSS IE hack)

/* ie fix */
background-image:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/banner01.png",
 sizingMethod="crop");
+2

: jQueryTOOLS GIF IE .

+1

, : jCSML. , , png IE 7 +.

0

! jQuery. . .

0

!

, . , , (IE 8). , .

, "zoom: 1", IE 8 background. background-color: transparent; IE .

CSS:

.classOfParentElement img {
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF)"; /* IE 8 */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#FFFFFFFF); /* IE 6 & 7 */
}

.classOfParentElement img {
    -ms-zoom: 1;
    zoom: 1;
    background-color: transparent;
}

, endColorstr=#00FFFFFF endColorstr=#FFFFFFFF.

, Viget.com.

0
source

More articles:


All Articles