Question

链接到页面：http://www.northtreestudios.com/sandbox/

想知道如何让我的网站的背景图片由于其宽度/位置而不会触发滚动条。我使用的是具有16列的960网格，但背景在任意位置有几个图像以创建一些细节效果。这些不符合网格;它们位于容器的左侧和右侧。

如果您查看链接，您会看到顶部的黄色条纹不会触发滚动，但如果窗口重新调整为小于其宽度，则底部的白色条纹会触发滚动。

我基本上希望只有当窗口宽度小于960网格时才会出现水平滚动条。所有其他图形附加功能更左侧或右侧不应触发滚动。有没有办法完成这个巨大的，效率低下的背景图像？

Answer 1

你需要做的是使背景图像实际上是背景图像，然后才能工作。

所以，首先你需要添加一些元素来生成背景图像，如下所示：

<body>
    <div class="wrapper background-foo">
        <!-- your content div -->
    </div>
</body>

每个图像需要一个背景div，div需要全宽，以便您的背景图像可以在任何地方。使用background-position为您安排背景。

一个可能有用的技巧，如果你想让图像在居中的右边，并且伸出一边，你可以这样伪造它：

.background-ffo { background: url(...) no-repeat 400px center; }

然后让背景图像看起来像这样：

         +-----------------------------------------+
         |          .background-foo                |
         |                                         |
         |                                         |
         |                                         |
         |                                         |
         |                                         |
         |                                         |
  +------------------------------------------------------------+
  |      |                               ###################   |
  |      |      background image         ###################   |
  |      |                               ###################   |
  |      |                               ###################   |
  |      |                               ###################   |
  +------------------------------------------------------------+
         |                                         |   ^^ the bit of background
         |                                         |      you care about
         |                                         |
         +-----------------------------------------+

由于它是一个背景，并且你的background-foo div仍然像你的内容一样适合页面，因此没有水平滚动条。

Answer 2

修改：

我已在此处上传了项目http://www.mediafire.com/?cndgyaq4grw，希望对您有所帮助。

上一个回答：

将position:fixed; right:0px; bottom:0px;添加到您的background-stripe-bottom div。

Answer 3

添加CSS overflow：none属性

因此，如果它显示在标记中，请将以下内容添加到该元素的CSS中。

#oneDiv{
width: 960px;
height: 100px;
overflow:none;
}

这应该可以解决问题。

防止背景图像允许滚动

3 个答案: