为什么<！DOCTYPE html>会改变页面布局？

问题描述 投票：0回答：1

我在写一个有背景图片的网页。下面是该页面的CSS。

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

这工作很好；图像的尺寸与页面的尺寸相同。然后我意识到我忘了在CSS中加入以下内容 <!DOCTYPE html> 在html的顶部，所以我添加了，因为我认为这不会改变任何东西。当我再次加载页面时，背景图片到处重复，遍布整个页面。谁能解释一下为什么会发生这种情况，我可以做些什么来解决这个问题？移除 <!DOCTYPE html> 又其实还好，还是有办法解决？

javascript html css doctype
1个回答
0
投票

这应该会让你的单张图片在浏览器中以全尺寸显示，即使你有一张 <!DOCTYPE> (我建议你 做 包括，因为这是比较好的做法）。)

html, body {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
}
body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

注意，必须确保 html 和 body 元素有100%的大小(并删除浏览器添加的任何默认的边距+padding)。

请注意，我使用了一个随机的图片示例。

EDIT: D.Pardal正确地指出，这个答案不能解释观察到的差异。

大部分的解释来自于以下事实。

  • 添加 <!DOCTYPE html> 使文档进入 "标准模式"
  • "标准模式 "决定了 body 元素的高度默认为包含其内容所需的最小尺寸。

原版无 <!DOCTYPE html> 拥有 <body> 填充了页面。将背景图片应用到这个 <body>，与 background-size: 100% 100% 填充整个页面。添加 DOCTYPE 缩小 body'的高度。

"如果图像的高度等于 <body>'的高度为0？"

因为正文有默认的边距，由浏览器应用，这些都算在背景图片的高度里。

"为什么图片一开始就没有重复？"

它在重复! 然而，第一次重复的图片大到足以填满整个父图。这可以通过去掉 DOCTYPE 并将图像的大小缩小到 background-size: 20% 20%;.

0
投票

正如我在这里解释的那样。如何去除使用线性梯度属性时出现的条纹。 当您在设置了 bacground-size:100% 100% 并添加了doctype。

body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: 100% 100%;
    background-position: center;
}

同样的情况也会发生在渐变着色上，因为渐变着色的尺寸是 100% 100% 默认情况下。

body {
    image-rendering: pixelated;
    background-image:linear-gradient(to bottom,red,blue);
}

要解决你的问题，你只需要确保... html 元素至少是 height:100%

html {
  min-height:100%;
}

body {
    image-rendering: pixelated;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Square_definition.svg/178px-Square_definition.svg.png");
    background-size: 100% 100%;
    background-position: center;
}

如果你把doctype删除就会陷入 妙趣横生 和事情会有不同的表现，但你不应该真正关心这个，因为你是 必须 将doctype添加到你的文档中。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.