jQuery在过渡期间重叠图像(尝试进行背景过渡)

问题描述

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

I'm trying to make a background transition between images, but I have this problem, the image appears to be on top on everything during the transition, and covers the fields and buttons. Then it goes behind them again.

在这样的真实内容之前，我有一个带有负边距的div(背景为div):

I have a div with negative margin (the background one) before the real content like this:

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

您可以在此小提琴上看到它

You can see it on this jfiddle

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

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

If I put everything inside the same div and change the opacity, the buttons and fields are faded too, I don't want that.

我尝试设置z-indexs，但是没有任何效果.

I tried setting z-indexes but nothing works.

有没有一种方法可以在过渡期间将褪色图像保持在其他内容的底部?

Is there a way to keep the fading image on bottom of the other content during the transition?

为什么会这样??

是否有更好的方法可以执行此操作而不使用插件? (这很简单，我不想仅为此在服务器上发出另一个http请求)

Is there a better way of doing this, without using a plugin? (this is simple, I don't want to make another http request on my server only for this)

感谢您的帮助

推荐答案

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

Note that in order for z-index property to work, you must set the position too on the elements:

position: relative;或

position: absolute;或

position: fixed;

只需在CSS中的#home_background元素中添加position: relative;，它就可以正常工作.

Just add position: relative; to the #home_background element in the CSS and it should work fine.

这篇关于jQuery在过渡期间重叠图像(尝试进行背景过渡)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！