过渡期间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;添加到CSS中的#home_background元素即可，它应该可以正常工作。