jquery - 过渡期间的jQuery重叠图像（尝试进行背景过渡）

Question

我正在尝试在图像之间进行背景过渡，但我遇到了这个问题，图像在过渡期间似乎位于所有内容的顶部，并覆盖了字段和按钮。然后它又回到他们身后。

在真正的内容之前，我有一个负边距（背景）的 div，如下所示：

<div id="background">
</div>
<div id="realcontent">
</div>  

你可以在这个 jfiddle 上看到它

http://jsfiddle.net/k9e5f/2/

如果我将所有内容放在同一个 div 中并更改不透明度，按钮和字段也会褪色，我不希望这样。

我尝试设置 z-indexes 但没有任何效果。

有没有办法在过渡期间将褪色图像保持在其他内容的底部？

为什么会出现这种情况？？！！

有没有更好的方法来做到这一点，而不使用插件？（这很简单，我不想只为此在我的服务器上发出另一个http请求）

谢谢你的帮助

Answer 1

请注意，为了使z-index属性起作用，您还必须在元素上设置位置：

position: relative;或者

position: absolute;或者

position: fixed;

只需添加position: relative;到#home_backgroundCSS 中的元素，它应该可以正常工作。