css - 在页面所有不包含控件的部分设置网页背景图片

Question

我正在将背景图片添加到网站上的现有页面。我被要求这样做是为了让图像显示在页面上的任何地方，除了包含页面上所有现有控件等的矩形。在这个矩形中，背景颜色将保持白色，就像今天一样。这是指向页面的链接，该页面显示修改完成后页面的外观: http://www.maestroweb.com/default_bgtest3.aspx

我已经尝试了多种方法来做到这一点。例如，我尝试添加

<div style="background-color: white">

或

<asp:Panel ID="Panel1" runat="server" BackColor="White">

围绕现有控件。这些方法正确地“确定”了矩形的高度，但宽度设置为窗口的宽度，这不是我想要的。我可以添加宽度属性，但页面上的控件具有不同的宽度，有时会发生变化。

到目前为止我想出的最好的解决方案是这样的:

<table bgcolor="White" align="center"><tr><td>
    <%-- All of the page's controls, etc. --%>
</td></tr></table>

这行得通。矩形大小正确，背景保持白色。新的背景图片只会出现在它应该出现的位置。

我的问题是上面的解决方案对我来说似乎很笨拙。是否有更好的方法来实现相同的目标？

谢谢。

Answer 1

你必须使用 css 属性 background-size: cover

body {
  background: url('http://www.maestroweb.com/6/winter.jpg');
  background-size: cover;
}
.content-wrapper {
  height: 400px;
  width: 600px;
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}

<div class="content-wrapper"></div>