我遇到了一个奇怪的问题:我想淡化图像。该代码有效,但褪色效果看起来很糟糕,至少在最新的 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,因为我需要调整图片的大小。任何帮助将非常感激。谢谢。