html - 背景图像宽度为 1200 像素，正文宽度为 900 像素。

Question

我需要您帮助我建立一个网站。我是一个新手，已经得到了一个设计为 900 像素宽的主体，但他们给了我一个 1200 像素宽的图像。他们希望图像跨越整个 1200 像素的宽度，因此页面两侧基本上会有 300 像素的重叠。我不太明白该怎么做，如有任何帮助，我们将不胜感激!

谢谢，戴夫

Answer 1

要实现他们的目标，最好的办法是在 CSS 中将图像设为背景图像。

1. 设置一个将包含图像(作为背景)的 div，并将其放置在页面上相对于您想要的位置。

   <div class="background"></div>`
   

2. 用内容填充 div 以指定高度或定义固定高度，比如 400px。

   <style>
    .background {
       height: 400px;
       width: 100%;
     }
   </style>
   

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

   <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