background-image 失效主因是路径错误（相对css文件）或元素无高度，需配合background-size:cover等属性；body全屏背景须清margin、设min-height:100vh；响应式推荐cover/contain，高dpr用image-set()或媒体查询；svg/渐变更轻量。
background-image 用法和常见失效原因
网页背景图不显示，八成是 background-image 路径或加载时机出了问题。它不是直接插图，而是 CSS 层叠样式里的一个属性，必须配合 background-size、background-repeat 等一起用才可控。
常见错误现象：404 Not Found（路径错）、页面空白（元素没高度）、图只显示左上角一小块（没设 background-size: cover）。
- 路径必须相对于 CSS 文件位置，不是 HTML 文件——如果 CSS 在
/css/style.css，图片在/images/bg.jpg，就得写url("../images/bg.jpg") - 目标元素（比如
或<div class="hero">）必须有明确高度，否则背景无处可展；<code>height: 100vh比height: 100%更可靠 - 别只写
background-image：至少补上background-size: cover和background-repeat: no-repeat，否则默认平铺且不缩放 -
body默认 margin 有浏览器默认值（如 8px），先用* { margin: 0; }或body { margin: 0; }清掉，否则背景边缘会露白边 - 加
min-height: 100vh而非height: 100vh，避免内容超长时背景被截断 - 如果图太暗或太亮，文字看不清，直接加一层半透黑色遮罩更稳妥：
background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url("bg.jpg") -
background-size: cover保证填满且不形变，但可能裁剪边缘；contain保证全貌可见，但留黑边——按设计需求二选一 - 高 DPR 设备（如 Retina 屏）需提供 2x 图：用
image-set()或媒体查询切换，例如@media (-webkit-min-device-pixel-ratio: 2)里重写background-image - 慎用
background-attachment: fixed：在 iOS Safari 和部分安卓浏览器中会触发渲染 bug，导致滚动卡顿或背景消失 - SVG 作为背景：把 SVG 内容 URL 编码后塞进
url("data:image/svg+xml,%3Csvg...%3E")，适合图标、纹理等小图形 - 线性渐变示例：
background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%)，比图片更快，也方便用 JS 动态改style.background - 如果必须用图片但想降级，可叠加多层
background-image：前面放 SVG 或渐变，后面放 JPG，现代浏览器会覆盖，老浏览器只认第一个
body 上设全屏背景的实操要点
想让背景图撑满整个视口， 是最常用载体，但默认它不会自动占满屏幕高度，得手动干预。
响应式背景图的兼容写法
同一张图在手机上拉伸变形、在桌面端模糊，往往是因为没适配分辨率或没选对 background-size 值。
易优cms汽车车辆租赁源码1.7.2
下载
由于疫情等原因大家都开始习惯了通过互联网上租车服务的信息多方面，且获取方式简便，不管是婚庆用车、旅游租车、还是短租等租车业务。越来越多租车企业都开始主动把租车业务推向给潜在需求客户，所以如何设计一个租车网站，以便在同行中脱颖而出就重要了，易优cms针对租车行业市场需求、目标客户、盈利模式等，进行策划、设计、制作，建设一个符合用户与搜索引擎需求的租车网站源码。 网站首页
立即学习“前端免费学习笔记（深入）”；
SVG 或渐变替代图片的轻量方案
纯色+简单几何图案的背景，真没必要发 HTTP 请求加载 JPG/PNG——用内联 SVG 或 CSS 渐变，体积小、缩放无损、还能用 CSS 变量动态改色。
真正难的不是“怎么加”，而是“加完是否在所有设备上都按预期出现”——路径、尺寸、DPR、滚动行为、父容器高度，任何一个环节松动，背景就可能失踪或错位。
