Question

我正在使用Twitter Bootstrap 2.2.2。我有一个具有固定高度的容器（基于用户窗口高度）和为其激活的滚动条。

问题来自于容器的图像背景：即使我将其设置为滚动，它也会起作用。

这是我的CSS：

html {
    width:100%;
    height:100%;
    overflow:hidden;
}
#tb1 {
    width:100%;
    height:40px;
    background-color:blue;
}
#tb2 {
    width:100%;
    height:30px;
    background-color:red;
}
#container {
    /*overflow-y:hidden;
    height:400px;*/
    background:url(http://placehold.it/350x150) no-repeat scroll transparent;
    position:absolute;
    top:70px;
    left:0;
    right:0;
    bottom:0;
}
#row1 {
    padding:10px;
    overflow-y:scroll;
    max-height:100%;
}

HTML：

<html>

    <head>
        <link rel="stylesheet" media="screen" href="//cdn.a973c.com/scripts/bootstrap/2.2.2/bootstrap-2.2.2.css">
        <link rel="stylesheet" media="screen" href="//cdn.a973c.com/scripts/bootstrap/2.2.2/bootstrap-responsive-2.2.2.css">
    </head>

    <body>
        <div id="tb1">tb1</div>
        <div id="tb2">tb2</div>
        <div id="container" class="container-fluid">
            <div class="row-fluid" id="row1" style="height:1500px;">
                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

                 <h1>content</h1>

            </div>
        </div>
    </body>

</html>

和jsFiffle

我的代码出了什么问题？

感谢您的帮助！

编辑：当我为＃row1取消设置高度时，我的背景正确滚动...

Answer 1

错误代码是：

 background:url(http://placehold.it/350x150) no-repeat scroll transparent;//No .png provied

您的css中未提供文件的扩展名。它应该在下面

更正代码

background:url(http://placehold.it/350x150.png) repeat scroll transparent;

正如我所看到的，我刚试过.png扩展程序，它需要通过扩展名指定哪种类型的文件

以下是fiddle

Answer 2

添加“后台附件：本地”可以解决您的问题：

#container {
    overflow-y:auto;
    height:400px;
    background:url(http://placehold.it/350x150) no-repeat transparent;
    background-attachment: local;
    top:70px;
    left:0;
    right:0;
    bottom:0;
}
#row1 {
    padding:10px;
    max-height:100%;
}

没有在固定高度容器上滚动图像背景

2 个答案: