Question

我需要你帮助我正在整理的网站。我是一个菜鸟，并且设计的机身设计宽度为900px，但它们给了我一个1200px宽的图像。他们希望图像跨越整个1200px宽，因此页面两侧基本上会有300px的重叠。我无法弄清楚如何做到这一点，任何帮助将不胜感激！

谢谢，戴夫

Answer 1

实现他们想要的最好的选择是使图像成为CSS中的背景图像。

设置一个包含图像的div（作为背景），并将其放在页面上相对于您想要的位置。
```
<div class="background"></div>`
```
使用内容填充div以获得高度或定义固定高度，例如400px。
```
<style>
 .background {
    height: 400px;
    width: 100%;
  }
</style>
```

现在，设置背景属性以达到您想要的效果。

<style>
.background {
 height: 400px;
 width: 100%;
 background-repeat: no-repeat;
 background-image: url(URL_TO_IMG);
 background-position: center center;
 background-size: cover;
}
</style>

这里的JSFiddle示例：

jsfiddle

Answer 2

您可以使用此代码：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
}

覆盖你所拥有的确切空间。

Answer 3

body{
    background: #ccc url(image_folder/image_name.extension) np-repeat 0 0 center;
}
#otherelement{
    /*Style Your Page Whatever you want...*/
}

背景图像宽1200px，体宽900px。

3 个答案: