IE7和;“锯齿状”;围绕分层PNG(使用jQuery)
我似乎在PNG文件周围遇到了“锯齿”(锯齿状像素化,本例中为黑色),特别是在IE7中使用了抗锯齿边缘,例如圆形边框(例如,一个大的光泽按钮)。我想我以前遇到过这个问题,但是在以前的设计中可能没有那么明显 问题是,它只在我淡入PNG时出现(在本例中,淡入另一个以获得时髦的滚动效果),因为最初,它看起来很好 无论如何,我不太确定这个问题是从哪里来的,但是这里有一个相关代码的简短转储;希望有一个解决方案 屏幕IE7和;“锯齿状”;围绕分层PNG(使用jQuery),jquery,css,png,transparency,antialiasing,Jquery,Css,Png,Transparency,Antialiasing,我似乎在PNG文件周围遇到了“锯齿”(锯齿状像素化,本例中为黑色),特别是在IE7中使用了抗锯齿边缘,例如圆形边框(例如,一个大的光泽按钮)。我想我以前遇到过这个问题,但是在以前的设计中可能没有那么明显 问题是,它只在我淡入PNG时出现(在本例中,淡入另一个以获得时髦的滚动效果),因为最初,它看起来很好 无论如何,我不太确定这个问题是从哪里来的,但是这里有一个相关代码的简短转储;希望有一个解决方案 屏幕 前后分别 jQuery $(document).ready(function(){
前后分别 jQuery
$(document).ready(function(){
$('.mf_fader').hover(function(event){
$('> *:first-child', $(this)).stop().fadeTo(450, 0);
$('> *:last-child', $(this)).stop().fadeTo(350, 1);
}, function(event){
$('> *:first-child', $(this)).stop().fadeTo(350, 1);
$('> *:last-child', $(this)).stop().fadeTo(450, 0);
});
});
CSS
#dbc_main-letsgo,
#dbc_main-letsgo > div{
width: 460px;
height: 150px;
}
#dbc_main-letsgo > div{ background-image: url(../img/btn_main-letsgo-default.png); }
#dbc_main-letsgo > div + div{ background-image: url(../img/btn_main-letsgo-hover.png); }
.mf_fader{
position: relative;
display: inline-block;
}
.mf_fader > *{
position: absolute;
}
.mf_fader > * + *{
display: none;
}
HTML
<a href="#" id="dbc_main-letsgo" class="mf_fader">
<div></div><div></div>
</a>
我假设这与IE糟糕的PNG支持有关,所以可能我被卡住了。每次我在IE中的透明PNG上使用不透明度/淡入淡出等,我都会得到完全相同的结果 此外,我访问过许多有同样问题的网站。当我看到那些自诩为jquery专家的人在他们透明的PNG上也有同样的问题时,我感觉好多了 据我所知,这是一个IE问题。如果你找到一种方法,在IE中不带黑色边框的Trans png上设置不透明动画…请发布
我不得不在一些时候从淡入淡出的效果转变为显示/隐藏效果不幸的是,这与IE7支持PNG的蹩脚尝试有关。由于6号的巨大失败,微软承诺在7号时给予支持,但有点失败了 不过,您可以在这里使用gif或8位PNG,从而获得更好的效果 我要做的是在浏览器中检查IE7,如果我检测到IE7,我会切换到隐藏显示,而不是淡入淡出
希望能有所帮助。是的,这是由于IE对PNG的支持较差
要解决这个问题,你可以做的一件事是,如果透明png后面的背景是纯色,你可以给div元素加上png图像背景色属性。我们可以用截图或链接吗?哦,当然可以;等待更新。另外,刚刚意识到(正在另一台机器上测试)IE8也有同样的功能。谢谢kdub;我还假设这是一个IE问题,尤其是PNG渲染。他们是最后一个采用PNG alpha通道支持的人,不是吗?浏览器无法同时管理透明PNG的合成和图像上的任何不透明效果。换句话说,对于任何给定的像素,您要么从PNG本身获得alpha通道效果,要么从不透明过滤器获得alpha通道效果,但不能同时从两者获得;我怀疑我能用GIF或8位PNG获得更好的效果,因为抗锯齿边缘是我想要的。不过,这不是一个可怕的视觉障碍,所以我会接受它。