1

私はこのようなことをします：

ここに画像の説明を入力

私はこのようにしました（http://jsfiddle.net/K5KjY/）：

CSS:

#container{

    width: 970px;
    margin: 0px auto;
}

#backdrop-slider img{ 
    position: fixed; /* <---- Problem should be here! */
    left: 0;
    right: 0;
    margin: 0px;
    width: 100%;
    height: 200px;
}  

#content{
    margin-top: 250px;
    width: 100%
}

HTML:

<body lang="en">
<div id="container">

    <div id="header">
        <h1>TITLE</h1>

        <div id="backdrop-slider">
            <img src="http://cf2.imgobject.com/t/p/original/fI3ucpgaVKOUcQ82vhgWmWuLlg2.jpg">
        </div> 
    </div>

    <div id="content">

        <div id="switcher">
          <p>
            <a href="#">Link 1</a>
            <a href="#">Link 2</a>
            <a href="#">Link 3</a>
          </p>
        </div>

        <div id="covers">

            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">

            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
            <img src="http://cf2.imgobject.com/t/p/w185/zh9DXJhBdHVVaWiDURTipADamcK.jpg">
        </div>


    </div>


</div>

</body>

しかし、このように、下にスクロールすると、次のようになります。下にスクロールする ここに画像の説明を入力 と、「背景スライダー」が上がります

4

1 に答える 1

2

z-index:-1;背景画像に追加します。（またはコンテンツの正のインデックス）

http://jsfiddle.net/K5KjY/4/

また、スクロール時に div を非表示にする場合position:absolute;は、fixed の代わりに使用します。

于 2013-01-12T23:40:32.263 に答える