2

我希望页面的背景图像拉伸到完整的宽度和高度。这里的挑战是它应该在顶部和底部留下一个 48 px 的区域（这些是页眉和页脚区域，我们不希望此图像隐藏在其后面）。另外，我正在尝试仅使用 css（没有 javascript 或客户端代码）。CSS3 没问题。

这是我到目前为止的位置。我已经能够获得最高利润：

 background-image: url('images/image1.png')
background-repeat: no-repeat;
background-attachment:fixed;
background-position:  center 48px;  
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
4

3 回答 3

1

我不会使用背景大小，而是制作一个内部包含图像的 div，并将其绝对定位到窗口，然后将您想要的所有内容相对放置在它的顶部，并具有更高的 z-index。早期版本的 IE 不支持 background-size css 属性，只有 IE9+。这是一个小例子：

<body>
    <div class="bg-image">
        <img src="images/image-1.png" />
    </div>
    <div class="content">
        <p>this is your content</p>
    </div>
</body>

然后对于 CSS：

.bg-image {
    position: absolute;
    width: 100%;
    height: auto; /*or 100%*/
    z-index: 1;
    padding: 48px 0px;
}

.bg-image img {
    width: 100%;
    height: 100%;
}

.container {
    position: relative;
    z-index: 2;
    top: 0px;
}
于 2012-07-18T19:49:39.833 回答
0

我会以稍微不同的方式处理这个问题——我会将三个<div>s 堆叠在一起，中间的一个会像你想要的那样应用背景图像。这样，您可以将第一个和第三个<div>s 设置为 48px 高，或者您想要的任何高度。

于 2012-07-18T19:56:42.497 回答
0

您可以将页眉和页脚都包装在一个包装器 div 上，该包装器具有：

.wrapper{
  width:100%;
  height:48px;
  background:(use solid color to cover your body background )
}

它看起来像这样：

<div class="wrapper">
 <header>
..
..
 </header>
</div

与页脚相同。

然后确保页眉和页脚都设置如下：

margin: 0 auto;
width:980px ( whichever is your width )

瞧。

于 2012-07-18T20:14:15.757 回答