css堆叠div

Question

我想要叠加div来显示使用和图像的顶部和底部淡入淡出。

外部div（“rotator”）有一个背景图像，顶部和底部有一个渐变，中间是透明的。在中间我想要显示内容或图像，并在顶部设置外部div背景图像，这样你总能看到顶部和底部的渐变以及背后的内容/图像。

感谢您的帮助。现在，背景图像总是被内部div内容/图像覆盖。

这是我的代码：

<div id="rotator">
<div class="content">this is my content</div>
</div>

#rotator 
{
    width:990px;
    height:300px;
    background: url('../Images/TIBC_Base/featured_area.png') repeat-x;
z-index:99;

}
#rotator .content
{
    width:990px;
    height:300px;
z-index:-1;
}

Answer 1

当您使用z-index属性时，必须使用位置属性，请尝试使用类似

的内容

张贴：亲戚

<div id="rotator">
<div class="content">this is my content</div>
</div>

    #rotator 
    {
        width:990px;
        height:300px;
        background: url('../Images/TIBC_Base/featured_area.png') repeat-x;
    position:relative;
    z-index:99;


    }

    #rotator .content
    {
        width:990px;
        height:300px;
    position:relative;
    z-index:-1;
    }

Answer 2

我在.image-frame中添加了新的#rotator div以及以下样式，以便在.content上添加阴影。并检查更新的code。

#rotator 
{
    width:990px;
    height:300px;
    position:relative;
}
.image-frame{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background: url('http://i47.tinypic.com/2lctevc.png') repeat-x;
}