现代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 这类 属性早已被 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 都缩放图像，但逻辑相反，选错会导致裁切或留白，且无法通过肉眼直接判断是否生效。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
cover：等比缩放至完全覆盖容器，**可能裁边**——适合全屏氛围图，但要注意关键内容是否被切掉 -
contain：等比缩放至完整可见，**必然留白**——适合 logo 或图标类背景，需配合background-color填充空白 - 不用这两个值时，默认是原始尺寸，小图会平铺，大图只显示左上角 100% 区域
- 调试时可在 DevTools 中临时切换值，观察渲染边界变化
background 简写属性容易意外清掉已有设置
用 background 一次性写颜色、图片、重复方式等，看似方便，但顺序和缺省值会悄悄覆盖你之前的声明。
- 合法顺序是：
background: <color><image><repeat><attachment><position> / <size></size></position></attachment></repeat></image></color> - 漏写
<color></color>会导致背景色变成透明（即transparent），如果父级没设色，就露出白色底 - 漏写
<image></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 - 这个组合必须成对出现，少一个都会在某些滚动场景下暴露白边
真正麻烦的从来不是“怎么写”，而是“为什么写了却不像预期那样工作”——路径解析规则、简写属性的隐式重置、视口高度计算逻辑，这些细节一旦忽略，调试时间远超编码时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
