Question

我在这里有这种CSS样式，但它横跨整个屏幕而不是仅仅在身体的960px宽度内重复它。

body
{
    width:960px;
    margin: 10px auto 10px auto;
    background-image:url(logo.png),url(backgroundimage.jpg);
    background-position: top center, top center;
    background-repeat: no-repeat, repeat-x;
    background-attachment: static;
}

logo.png只是公司徽标的图像，而backgroundimage.jpg是我想要仅在960px范围内而不是整个页面范围内的东西。我怎么能这样做？

Answer 1

您需要制作一个容器类。这个类将包含所有内部div类和内容。

此代码如下：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>

  <style>
  .container{
    width: 960px;
    background: url("logo.jpg");
    height: 700px;
  }
  </style>

  <body>
    <div class="container">

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

更简单的方法是使用bootstrap。 Bootstrap框架提供了一个预制的.container类，内置了自定义响应。

CSS背景图像仅跨越960px

1 个答案: