【发布时间】：2012-03-26 20:18:30
【问题描述】：
我遇到了一个奇怪的问题：我想淡化图像。该代码有效，但褪色效果看起来很糟糕，至少在最新的 Firefox 中是这样。但在其他网站（网络上）上，它显然在同一个浏览器中运行良好。 好的，这是我的代码：
HTML：
<div class="fade">
<img src="http://localhost/ami/wp-content/gallery/ami/400_1.jpg" alt="test" />
<div class="firstpic">
<img src="http://localhost/ami/wp-content/gallery/ami/400_2.jpg" alt="test2" />
</div>
</div>
CSS：
.fade{top: 115px; left: 290px; position: absolute; display: block;}
.firstpic{position: absolute; top: 0px; left: 0px; display: none;}
Javascript：
$("#button").click(function(){
$(".firstpic").fadeIn(800);
});
所以，这个设置非常简单：我有两个 div，都定位为绝对值。具有“firstpic”类的 div 在具有“fade”类的 div 中。两者都包含一个 img 元素。具有“firstpic”类的 div 默认情况下是不可见的（参见 CSS），因此它可以淡入。淡入是通过按下按钮触发的（参见 Javascript）。但它并没有很好地淡入，而是以黑色背景淡入。我认为这可能是因为“img”元素。当我使用带有 css-background 图像的两个 div 时，它会很好地淡化。但我需要 img-Elements，因为我需要调整图片的大小。 任何帮助将非常感激。谢谢。
【问题讨论】：
-
我对此没有任何意见。看我的例子 - jsfiddle.net/7xWWt
-
您正在从黑色背景中消失，而不是从其他图像中消失。所以当然看起来不错。