现代html页面背景必须用css控制，禁用过时的bgcolor属性；纯色用background-color，图片背景需设置background-size、position和repeat，多背景用background复合属性按从后往前顺序声明，响应式需结合媒体查询与性能优化。
HTML 页面背景不能靠 这种过时写法实现，现代方案必须用 CSS 控制，否则在任何主流浏览器中都会失效或被忽略。
用 background-color 设置纯色背景
这是最基础也最可靠的背景设置方式，直接作用于 或根容器元素。它不依赖图片加载，无兼容性问题，且能被打印样式正确识别。
- 推荐写在
<style></style>标签内或外部 CSS 文件中，避免内联 style 影响可维护性 - 颜色值优先用十六进制（如
#f0f0f0）或 RGB/RGBA（如rgba(255, 255, 255, 0.9)），后者支持透明度 - 不要混用
bgcolor属性和 CSS —— 浏览器会忽略bgcolor，但保留它可能误导后续维护者
用 background-image 设置图片背景
图片背景需明确控制尺寸、定位和重复行为，否则极易出现拉伸变形、偏移或无限平铺等意外效果。
- 路径必须准确：本地图用相对路径（如
url("images/bg.jpg")），网络图用完整 URL（如url("https://example.com/bg.png")） - 务必搭配
background-size：常用值为cover（缩放填满）、contain（完整显示）、或具体像素/百分比 - 用
background-position调整起始位置，例如center top或50% 20% - 默认会平铺（
background-repeat: repeat），如不需要，请显式设为no-repeat
body {
background-image: url("bg-pattern.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-color: #2c3e50;
}
用 background 复合属性一次性声明
当多个背景层（如渐变 + 图片 + 颜色）共存时，background 是唯一能清晰表达层级顺序的写法 —— 从后往前堆叠，最后一个是底层，最先一个是顶层。
立即学习“前端免费学习笔记（深入）”；
- 语法顺序固定：
background: [color] [image] [position] / [size] [repeat] [attachment] [origin] [clip]; - 省略项会取默认值，但
background-color必须放在最前面，否则会被后面的background-image覆盖 - 多背景用逗号分隔，例如：
background: linear-gradient(45deg, #000, #fff), url("texture.png"); - 注意：IE10 及以下不支持多背景，如需兼容，得降级为单图+伪元素模拟
响应式背景适配的关键点
移动端设备宽高比差异大，单纯靠 cover 可能裁剪关键内容区域，必须结合媒体查询或现代单位干预。
- 对重要视觉元素（如人物脸部、Logo），用
background-position: center保核心可见 - 小屏下可改用更简化的背景（如纯色替代复杂图），通过
@media (max-width: 768px)切换 - 慎用
background-attachment: fixed：iOS Safari 和部分安卓 WebView 中会禁用或触发重绘卡顿 - 图片体积影响首屏速度，背景图建议压缩至 100KB 以内，必要时用 WebP 格式
真正难的不是“怎么加背景”，而是判断该用颜色、渐变、单图还是多层合成；以及在不同设备上，用户看到的是你想表达的氛围，还是被裁掉一半的图、糊成一片的渐变、或者根本没加载出来的空白。
