Question

我对背景图片感到困惑：

div元素
中的背景图片
当背景图片位于div时，图片会放在div中。
body元素
中的背景图片
当背景图像处于束缚体内时，图像被放置在身体元素之外。

谁能告诉我为什么？

结果

我的代码：

  body{
            height: 300px;
            width: 300px;
            position: absolute;
            top: 20%;
            left: 20%;
            border: 2px solid black;
            background-image: url('./alert.png');
            background-repeat: no-repeat;
 }
div{
             border:2px solid red;
             width:100px;
             height:100px;
             border: 2px solid red;
             background-image: url('./alert.png');
             background-repeat: no-repeat;
             position: absolute;
             top: 10%;
             left: 10%
 }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
</head>
  
<body>
    <div>
    </div>
</body>

</html>

Answer 1

我不知道为什么会出现这种情况，我猜测<body>标签有一个特殊的行为，因为它应该是整个页面的根元素，并且通常包装所有内容。但<body>元素的背景图像或颜色始终位于左上角，否则唯一的定位方法是使用background-position CSS属性，实际上不使用颜色。要为背景颜色创建间隙，您只能为<html>标记提供背景颜色，但我认为这更像是一种解决方法而非实际解决方案。就个人而言，我总是将margin的{{1}}和padding设置为0，并与<body>内的<div> Wrapper元素实现进一步的差距。下面是两个工作代码示例，展示如何设置<body>以及如何在background-position标记的帮助下为背景颜色设置（假）“边距”。哦，是的，有什么理由，为什么你的身体绝对定位？只是想知道是否有任何用例。

身体的定位背景

<html>

在body { background: url('http://via.placeholder.com/350x150'); background-position: 20px 50px; background-repeat: no-repeat; height: 200px; border: 1px solid; }的帮助下
“保证金”

<html>

Answer 2

来自the specification（我的重点）：

根元素的背景成为背景   帆布和覆盖整个画布，锚定（为   ＆＃39;背景位置＆＃39;）与它的情况相同   仅为根元素本身绘制。根元素没有   再次画这个背景。

但是，对于HTML文档，我们建议作者指定   BODY元素的背景而不是HTML元素。 ：用于   其根元素为HTML的文档＆＃34; HTML＆＃34;元素或XHTML   ＆＃34; HTML＆＃34;计算了＆＃39;透明＆＃39;的值的元素对于   ＆＃39;背景色＆＃39;并且没有＆＃39;对于＆＃39; background-image＆＃39;，用户代理必须   而是使用背景属性的计算值   元素的第一个HTML＆＃34; BODY＆＃34;元素或XHTML＆＃34; body＆＃34;元素孩子的时候   绘画画布背景，不得画背景   对于那个子元素。 这样的背景也必须固定在   如果它们仅为根绘制，它们将是相同的点   元件

关于body元素中背景图像的CSS混淆

2 个答案: