声明DOCTYPE后CSS background-image高度为0不显示问题

这是浏览器标准模式和怪异模式的百分比高度计算规则差异导致的，和资源路径、CSS属性逻辑无关：

• 没加DOCTYPE时浏览器运行在怪异模式，会默认把<html>、<body>元素高度撑满整个视口，子元素写height: 100%能直接拿到视口高度值，所以.bgimage能正常撑开显示背景。
• 加上<!DOCTYPE html>后浏览器切换到标准模式，严格按W3C规则计算布局：用百分比设置高度的元素，必须所有上级父元素都有明确可计算的高度，否则百分比高度直接按0处理。

你的代码里只给.bgimage设了height: 100%，但它的父标签<body>、根标签<html>都没设置高度，浏览器根本算不出来这个100%到底对应多少像素，直接把.bgimage高度计算为0，背景图自然无法显示。

在CSS中补充html和body元素的高度声明即可：

html,
body {
  height: 100%;
  margin: 0; /* 清除浏览器默认给body添加的8px外边距，避免出现多余滚动条 */
}

如果不想给父级元素设置高度，也可以直接把.bgimage的height: 100%改成height: 100vh，100vh本身就代表当前视口高度，不依赖父元素的高度值计算，展示效果完全一致。

额外注意：你当前的.bg-text使用了绝对定位，默认是相对于整个文档定位的，如果要让它固定在背景图区域内居中，可以给.bgimage添加position: relative属性，让绝对定位的文字以它为定位参考，避免后续页面新增内容时文字位置偏移。

内容的提问来源于stack exchange，提问作者gvvv