现代HTML页面背景必须用CSS控制，bgcolor和background属性已被HTML5废弃；background-image不显示主因是路径错误（以HTML文件为基准）或加载顺序问题；cover会裁边，contain必留白；background简写易隐式重置属性；body背景铺不满需设html{height:100%}和body{margin:0;min-height:100vh}。
现代 HTML 页面的背景必须用 CSS 控制，bgcolor 和 background 这类 <body> 属性早已被 HTML5 废弃，所有主流浏览器都不再保证兼容——你写上去可能“看起来有效”，但实际是靠浏览器兜底兼容，不是标准行为。
为什么 background-image 不显示？路径和加载顺序是关键
最常见现象：CSS 写了 background-image: url("bg.jpg")，但页面空白，控制台报 404。问题几乎总出在路径上。
- 相对路径以 HTML 文件所在目录为基准，不是 CSS 文件位置——哪怕 CSS 是外链的，路径解析仍从 HTML 出发
- 如果图片放在
assets/images/下，而 HTML 在根目录，就得写url("assets/images/bg.jpg")，不能漏掉assets/ - URL 中的引号可选（
url(bg.jpg)合法），但路径含空格或特殊字符时必须加引号 - 图片未加载完成前，浏览器不会渲染背景；若设了
background-color，它会作为 fallback 先显示
background-size: cover 和 contain 的行为差异直接影响视觉效果
cover 和 contain 都缩放图像，但逻辑相反，选错会导致裁切或留白，且无法通过肉眼直接判断是否生效。
-
cover：等比缩放至完全覆盖容器，**可能裁边**——适合全屏氛围图，但要注意关键内容是否被切掉 -
contain：等比缩放至完整可见，**必然留白**——适合 logo 或图标类背景，需配合background-color填充空白 - 不用这两个值时，默认是原始尺寸，小图会平铺，大图只显示左上角 100% 区域
- 调试时可在 DevTools 中临时切换值，观察渲染边界变化
background 简写属性容易意外清掉已有设置
用 background 一次性写颜色、图片、重复方式等，看似方便，但顺序和缺省值会悄悄覆盖你之前的声明。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 合法顺序是：
background: <color> <image> <repeat> <attachment> <position> / <size> - 漏写
<color>会导致背景色变成透明（即transparent），如果父级没设色，就露出白色底 - 漏写
<image>会清空图片，只保留其他值——你以为在调位置，其实图已经没了 - 更稳妥的做法：分开写
background-color和background-image等，避免隐式重置
body 背景色没铺满视口？缺了 min-height 和 margin 重置
写了 body { background-color: #f0f0f0; }，但滚动时顶部或底部闪白——这不是颜色没生效，而是 body 没撑满整个可视区。
-
html元素默认高度不等于视口，body又默认有margin: 8px，这两者叠加就会露白 - 必须加：
html { height: 100%; }+body { margin: 0; min-height: 100vh; } - 只写
height: 100vh不够：当页面内容超长时，body高度会被内容撑开，100vh反而限制它，所以要用min-height - 这个组合必须成对出现，少一个都会在某些滚动场景下暴露白边
真正麻烦的从来不是“怎么写”，而是“为什么写了却不像预期那样工作”——路径解析规则、简写属性的隐式重置、视口高度计算逻辑，这些细节一旦忽略，调试时间远超编码时间。
