开发者

IE CSS "filters" break alpha transparency

开发者 https://www.devze.com 2023-03-27 06:29 出处:网络
I\'m trying to figure out whether there\'s a weird solution to this weird problem. Basically, IE >= 7 supports PNG transparency perfectly, and it has also supported a lot of the new cool stuff in CSS

I'm trying to figure out whether there's a weird solution to this weird problem.

Basically, IE >= 7 supports PNG transparency perfectly, and it has also supported a lot of the new cool stuff in CSS3 for years, through weird settings in the "filter" property.

However, when you apply a filter to an element that has a PNG background, the alpha-transparency of that background basically breaks (very similarly to how IE6 did).

If possible, I'd like to use the CSS3 properties that other browsers give me, and also get them in IE, instead of implementing them in JS (transitions) or not at all (rotations), but I can't unless I find a fix for the semi-transparency pr开发者_如何学Gooblem.

Has any of you found this problem and a fix for it?


EDIT: Added some code, although I'm not sure it exemplifies much:

#.faded {
    filter:progid:DXImageTransform.Microsoft.Fade(duration=2)
}

When I add this, PNG opacity breaks in IE for those element. It actually happens with all filters, or at least all I've tried.


Thank you!

Daniel


Have you tried CSS3 PIE or some other third party solution - no need to reinvent the wheel if an existing solution already works.


The best try that I could active was: http://jsfiddle.net/xtT6b/

The point is to separate the block with filter from the block with background, and add the alphaImageLoader filter to the block with background.

However, it's not ideal and in IE7 on some images the result can be good, but on other there would be some artifacts.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号