设置元素背景需用CSS的background及其子属性，注意值不能为空、顺序要正确、尺寸要足够、图片定位缩放要显式设置，并兼顾可读性与兼容性。
用 background 设置元素背景最直接
HTML 元素本身不处理背景，得靠 CSS 的 background 或其子属性（比如 background-color、background-image）来控制。直接在对应元素的 style 里写，或者用 class 链到外部样式表里都行。
常见错误是只写 background 却漏掉值，比如 background: ; 或 background: none; —— 这会清掉所有背景，包括父级继承下来的，容易误以为“没生效”。
-
background-color只管纯色，支持hex、rgb()、hsl()和语义色名（如transparent） -
background-image支持url()、linear-gradient()等，但路径出错时浏览器不会报错，只会静默失效 - 用简写
background时，顺序敏感：颜色必须在图片之后，否则会被覆盖（例如background: url(img.png) red;是对的，反过来就丢图）
给 <div> 或 <code><section></section> 加背景要注意尺寸
空的块级元素（比如没内容、没高度的 <div>）设了 <code>background-color 也看不见——因为它的 height 是 0。这不是背景没生效，是盒子压根没占空间。
典型场景：想做一个带背景的“分隔条”或“卡片容器”，结果一片空白。
立即学习“前端免费学习笔记（深入）”；
- 加
height或min-height（比如min-height: 100px;） - 让内容撑开它（文字、内边距
padding、伪元素::before等） - 用
display: inline-block;或float会触发 BFC，但也可能破坏布局流，慎用
background-size 和 background-position 不配好，图就跑偏
用 background-image 时，默认平铺（repeat），且从左上角开始。想让一张图居中、缩放、不拉伸，必须显式设置这两个属性。
常见错误现象：图片被裁切、只显示左上角一小块、在高分辨率屏上模糊。
-
background-size: cover;保证填满，但可能裁边；contain保证全显，但可能留白 -
background-position: center;比50% 50%更易读，效果一致 - 如果用了
background-attachment: fixed;，在移动端常失效或卡顿，iOS Safari 尤其明显
用 background 做渐变或透明底时，记得检查文字可读性
渐变背景（linear-gradient()）或半透背景（rgba(0,0,0,0.5)）很常用，但容易忽略文字对比度是否达标。
不是所有“看起来能看清”的组合都符合无障碍标准。深灰字配浅灰背景、白字配带亮部的渐变，都可能在某些屏幕下糊成一片。
- 用浏览器 DevTools 的颜色拾取器点一下文字和背景色，手动算对比度（至少 4.5:1）
- 避免对
body或顶层容器设半透黑背景再叠一层白色文字——阴影或描边比调透明度更可控 -
backdrop-filter能做毛玻璃效果，但它和background是两套机制，不能混着当背景用
背景这事，看着简单，但尺寸、层级、对比度、设备兼容性几个点一碰，就容易漏掉一两个。尤其在响应式里改完宽度，发现背景图突然重复或错位，十有八九是 background-size 或容器高度没同步动。
