Question

与margin和background-image一起使用时，普通<div>和<body>的行为完全相同。

普通<div>按预期工作（margin不属于内容，因此margin中不会显示背景图片）：

div {
  background: url("http://www.w3schools.com/cssref/img_flwr.gif");
  background-size: auto;
  background-position: top left;
  background-repeat: no-repeat;
  padding-top: 40px;
  border:1px solid black;
  margin:60px;
}

<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Original image: <img src="http://www.w3schools.com/cssref/img_flwr.gif" alt="Flowers" width="224" height="162" /></p>

<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p>
</div>

但是，margin似乎是<body>内容的一部分，背景图片出现在边距中，这是意外的：

body {
  background: url("http://www.w3schools.com/cssref/img_flwr.gif");
  background-size: auto;
  background-position: top left;
  background-repeat: no-repeat;
  padding-top: 40px;
  border:1px solid black;
  margin:60px;
}

<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Original image: <img src="http://www.w3schools.com/cssref/img_flwr.gif" alt="Flowers" width="224" height="162" /></p>

<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p>
</body>

Answer 1

如果您未在<html>元素上设置背景，则body元素的背景将传播到画布。如果您不想要，只需为html元素设置背景。

即。 html { background-color: white; }

正式的CSS spec says

...对于根元素为HTML＆＃34; HTML＆＃34;元素或XHTML＆＃34; html＆＃34;计算了＆＃39;透明＆＃39;的值的元素为了背景色＆＃39;并且没有＆＃39;对于＆＃39; background-image＆＃39;，用户代理必须使用该元素的第一个HTML＆＃34; BODY＆＃34;的背景属性的计算值。元素或XHTML＆＃34; body＆＃34;绘制画布背景时的元素子元素，不得为该子元素绘制背景。如果仅为根元素绘制它们，那么这些背景也必须固定在同一点上。

＆＃13;

html {
  background-color: white;
}

body {
  background: url("http://www.w3schools.com/cssref/img_flwr.gif");
  background-size: auto;
  background-position: top left;
  background-repeat: no-repeat;
  padding-top: 40px;
  border:1px solid black;
  margin:60px;
}

＆＃13;

<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
<p>Original image: <img src="http://www.w3schools.com/cssref/img_flwr.gif" alt="Flowers" width="224" height="162" /></p>

<p><strong>Note:</strong> The background-size property is not supported in Internet Explorer 8 and earlier versions.</p>
</body>

＆＃13;

Answer 2

我不知道这个错误背后的真正原因，但得到了一个棘手的解决方案。把它交给你的css

      background-position: top 70px left 70px;//change the value as you want

CSS

body {
  background: url("http://www.w3schools.com/cssref/img_flwr.gif");
  background-size: auto;
  background-position: top 70px left 70px;
  background-repeat: no-repeat;
  padding-top: 40px;
  border:1px solid black;
  margin:60px;
}

与边距和背景图像一起使用时

2 个答案: