Javascript 为什么<；！DOCTYPE html>；更改页面布局？

我正在写一个有背景图片的网页。以下是CSS：

body {
    image-rendering: pixelated;
    background-image: url("Images/page-background.png");
    background-size: 100% 100%;
}

---

效果很好；图像的尺寸与页面的尺寸相同。然后我意识到我忘了在html的顶部包含

，所以我添加了，因为我认为它不会改变任何东西。当我再次加载页面时，背景图像在页面上到处重复。有人能解释为什么会发生这种情况，以及我能做些什么来修复它吗？再次删除

是否还可以，或者是否有办法修复它？

这应该会让您在浏览器的全尺寸上显示一个图像，即使您有

（我建议您包括在内，因为这是更好的做法）：

html，正文{
宽度：100%；高度：100%；
边距：0；填充：0；
}
身体{
图像渲染：像素化；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
背景尺寸：包含；
背景位置：中心；
背景重复：无重复；
}

即使您有一个

（我建议您包括这一点，因为这是更好的做法），这也会让您以浏览器的全尺寸显示一个图像：

html，正文{
宽度：100%；高度：100%；
边距：0；填充：0；
}
身体{
图像渲染：像素化；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
背景尺寸：包含；
背景位置：中心；
背景重复：无重复；
}

正如我在这里解释的那样：在添加doctype设置

背景大小：100%100%

时，您将面临复杂的背景传播：

正文{
图像渲染：像素化；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
背景大小：100%100%；
背景位置：中心；
}

正如我在这里解释的那样：在添加doctype设置

背景大小：100%100%

时，您将面临复杂的背景传播：

正文{
图像渲染：像素化；
背景图像：url（“https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
背景大小：100%100%；
背景位置：中心；
}

默认情况下，背景重复。请参见

background repeat

不同的doctype具有不同的默认行为，因为HTML标准会随着时间的推移而发生变化。这就是这个标记的全部要点，允许您选择所需的版本。您的html文档是否包含

和

标记？我怀疑在您第一次尝试时，您的浏览器认为您的内容是纯图像（与右键单击图像并说“在新选项卡中打开”时的解释相同），而在

中，您强制chrome呈现为html文档。我尝试添加背景重复：无重复；而且图像没有与网页相同的尺寸。还有什么我能做的吗？是的，它确实包括头部和身体标签。移除标签可以吗？如果没有它，不同浏览器的网页会看起来不同吗？默认情况下，背景会重复。请参见

background repeat

不同的doctype具有不同的默认行为，因为HTML标准会随着时间的推移而发生变化。这就是这个标记的全部要点，允许您选择所需的版本。您的html文档是否包含

和

标记？我怀疑在您第一次尝试时，您的浏览器认为您的内容是纯图像（与右键单击图像并说“在新选项卡中打开”时的解释相同），而在

中，您强制chrome呈现为html文档。我尝试添加背景重复：无重复；而且图像没有与网页相同的尺寸。还有什么我能做的吗？是的，它确实包括头部和身体标签。移除标签可以吗？如果没有它，不同浏览器的网页会看起来不同吗？没有解释为什么。非常感谢@Gershom的回答。起初这不起作用，但后来我更改了“背景大小：contain；”“背景大小：100%100%；”成功了！非常感谢。@PrimeCubed您不应该将html和body元素置于绝对位置：这是一个非常糟糕的主意，根本不需要它。你所需要的只是：（或者）没有解释为什么。非常感谢@Gershom的回答。起初这不起作用，但后来我更改了“背景大小：contain；”“背景大小：100%100%；”成功了！非常感谢。@PrimeCubed您不应该将html和body元素置于绝对位置：这是一个非常糟糕的主意，根本不需要它。你所需要的就是这个：（或）