Html CSS对body元素中背景图像的混淆

我被背景图像弄糊涂了：

div

元素中的背景图像

当背景图像位于

div

中时，图像将放置在

div

中

body

元素中的背景图像

当背景图像位于受约束的主体中时，图像将放置在主体元素的外部

谁能告诉我为什么

这就是结果

我的代码：

正文{
高度：300px；
宽度：300px；
位置：绝对位置；
最高：20%；
左：20%；
边框：2件纯黑；
背景图像：url（'./alert.png'）；
背景重复：无重复；
}
div{
边框：2倍纯红；
宽度：100px；
高度：100px；
边框：2倍纯红；
背景图像：url（'./alert.png'）；
背景重复：无重复；
位置：绝对位置；
排名前10%；
左：10%
}

测试

我不知道为什么会出现这种情况，我猜

标记有一种特殊的行为，因为它应该是整个页面的根元素，并且通常会包装所有内容。但是

元素的背景图像或颜色始终位于左上角，否则定位它的唯一方法是使用

背景位置

CSS属性，该属性实际上不会与颜色一起工作。要为背景色创建间隙，您只能为

标记提供背景色，但我认为这更像是一种解决方法，而不是实际的解决方案。就我个人而言，我总是将

的

边距

和

填充

设置为0，并在

中使用

包装器元素来实现进一步的间隙。下面是两个工作代码示例，说明如何设置

背景位置

，以及如何借助

标记为背景色设置（假）“边距”。哦，是的，还有什么原因，为什么你的身体是绝对的？只是想知道这是否有任何用例

身体定位背景

正文{
背景：url（'http://via.placeholder.com/350x150');
背景位置：20px 50px；
背景重复：无重复；
高度：200px；
边框：1px实心；
}

我不知道为什么会出现这种情况，我猜

标记有一种特殊的行为，因为它应该是整个页面的根元素，并且通常会包装所有内容。但是

元素的背景图像或颜色始终位于左上角，否则定位它的唯一方法是使用

背景位置

CSS属性，该属性实际上不会与颜色一起工作。要为背景色创建间隙，您只能为

标记提供背景色，但我认为这更像是一种解决方法，而不是实际的解决方案。就我个人而言，我总是将

的

边距

和

填充

设置为0，并在

中使用

包装器元素来实现进一步的间隙。下面是两个工作代码示例，说明如何设置

背景位置

，以及如何借助

标记为背景色设置（假）“边距”。哦，是的，还有什么原因，为什么你的身体是绝对的？只是想知道这是否有任何用例

身体定位背景

正文{
背景：url（'http://via.placeholder.com/350x150');
背景位置：20px 50px；
背景重复：无重复；
高度：200px；
边框：1px实心；
}

来自（我的重点）：

根元素的背景将成为 画布并覆盖整个画布，锚定（用于 “背景位置”）的位置与 仅为根元素本身绘制。根元素不存在 再次绘制此背景

但是，对于HTML文档，我们建议作者指定 BODY元素而不是HTML元素的背景用于 其根元素为HTML“HTML”元素或XHTML的文档 “html”元素，该元素的计算值为“transparent” “背景图像”的“背景色”和“无”，用户代理必须 而是使用从该属性计算出的背景属性值 元素的第一个HTML“BODY”元素或XHTML“BODY”元素的子元素 为画布绘制背景，并且不得绘制背景 对于该子元素这些背景也必须固定在 如果它们只为根而绘制，则与它们相同 元素

来自（我的重点）：

根元素的背景将成为 画布并覆盖整个画布，锚定（用于 “背景位置”）的位置与 仅为根元素本身绘制。根元素不存在 再次绘制此背景

但是，对于HTML文档，我们建议作者指定 BODY元素而不是HTML元素的背景用于 其根元素为HTML“HTML”元素或XHTML的文档 “html”元素，该元素的计算值为“transparent” “背景图像”的“背景色”和“无”，用户代理必须 而是使用从该属性计算出的背景属性值 元素的第一个HTML“BODY”元素或XHTML“BODY”元素的子元素 为画布绘制背景，并且不得绘制背景 对于该子元素这些背景也必须固定在 与他们的观点相同