css - cssスタッキングdiv

Question

divをスタックして、画像を使用して上下のフェードを表示するようにしています。

外側のdiv（「ローテーター」）には、上下にグラデーションがあり、中央が透明な背景画像があります。真ん中にコンテンツまたは画像を表示し、外側の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プロパティを使用している間、positionプロパティが必要である必要がありますが、次のようなものを使用してみてください

位置：相対

<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-framedivを中に追加しました。更新されたコードを確認します。#rotator.content

#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;
}