简体   繁体   English

Jquery - PNG图像中的fadeIn()和fadeOut()。 IE8中的边框固体(黑色)......?

[英]Jquery - fadeIn() and fadeOut() in PNG image. Border Solid (black) in IE8…?

I am running a fadeIn() and fadeOut() in a block of div where there is a PNG image, with semi-transparent funds (with shadow). 我在div的块中运行fadeIn()和fadeOut(),其中有一个PNG图像,半透明资金(带阴影)。

See in http://jsfiddle.net/k3KUj/8/embedded/ http://jsfiddle.net/k3KUj/8/embedded/

In IE 8, it appears the hard edges when you run the fadeIn() and fadeOut(), but soon disappears. 在IE 8中,当你运行fadeIn()和fadeOut()时它会出现硬边,但很快就会消失。 In Firefox, it's OK. 在Firefox中,没关系。

Logical to apply a background color in PNG (for example, with the link above, the background color should be light gray), it works. 逻辑以在PNG中应用背景颜色(例如,使用上面的链接,背景颜色应该是浅灰色),它可以工作。

But do not want to put a background color in PNG. 但是不想在PNG中添加背景颜色。 I'm trying to get black borders do not appear in IE 8, even if you have a PNG image transparency. 我试图让IE 8中没有出现黑色边框,即使你有PNG图像透明度。

Looking at the response in the forum , tried: 看看论坛中的回复,试过:

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)" ; -ms-filter:“progid:DXImageTransform.Microsoft.gradient(startColorstr =#00FFFFFF,endColorstr =#00FFFFFF)”; /* IE8 / / * IE8 /
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr =#00FFFFFF,endColorstr =#00FFFFFF); / IE6 & 7 */ / IE6&7 * /
zoom: 1; zoom:1;

and see in jquery IE Fadein and Fadeout Opacity 并在jquery IE Fadein和Fadeout Opacity中查看

$('#bloc').css('filter', 'alpha(opacity=40)'); $('#bloc')。css('filter','alpha(opacity = 40)');

and see in fadeIn / fadeOut jquery problem with IE7/8 & png 并在IE7 / 8&png中查看fadeIn / fadeOut jquery问题

$("#bloc").css('filter', 'none'); $(“#bloc”)。css('filter','none');

But, doesn't work. 但是,不起作用。 Any new idea, without applying any color in the image background transparent? 任何新的想法,没有在图像背景中应用任何颜色透明?

Thanks, Vinicius. 谢谢,Vinicius。

Define a solid background color to your image: 为图像定义纯色背景:

.container img {
         background-color: white;
    }

Define the background-image css property of your image to its src attribute: 图像background-image css属性定义为其src属性:

$('.holder-thumbs li a img').each(function() {
         $(this).css('background-image', $(this).attr('src'));
    });

Advantage: you don't need to change your markup 优点:您无需更改标记

Disadvantage: sometimes applying a solid background color is not an acceptable solution. 缺点:有时应用坚实的背景颜色是不可接受的解决方案。 It normally is for me. 它通常适合我。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM