CSS变量无法直接用于background-image的url()中，需用background简写属性配合var(--bg-value)或JS动态设置；全屏背景需height: 100vh、background-size: cover、background-position: center center三者缺一不可；避免闪屏应预加载图片再更新变量。
background-image用CSS变量为什么没生效
因为background-image不支持直接插值CSS变量，写成background-image: url(var(--bg-url))浏览器会静默失败，控制台也不报错，图就直接没了。
真正能用变量的地方是background简写属性的「值部分」，但必须配合attr()或element()（基本不可用），所以实际方案只有两个：
- 用
background简写 +var(--bg-value)，把整个声明当字符串塞进去（比如--bg-value: linear-gradient(45deg, #f00, #00f), url(/a.jpg)） - 用JS动态设置
style.background，再由CSS变量驱动——更可控，也兼容老浏览器
全屏背景要撑满又不变形的关键CSS组合
光写background-size: cover不够，容易被父容器高度截断或留白。真正起作用的是这三行缺一不可：
-
height: 100vh：确保元素占满视口高度（注意vh在iOS Safari里有滚动条缩放bug） -
background-size: cover：等比缩放并覆盖全部区域 -
background-position: center center：避免偏移，尤其在宽高比差异大时
如果父容器本身没设height: 100%，100vh可能反而多余；遇到嵌套布局，优先检查父级是否“塌陷”。
用CSS变量切换背景时如何避免闪屏
闪屏本质是图像加载间隙+重绘时机不对。直接改--bg-url变量不会触发重绘，必须让浏览器感知到background属性变化：
- 用
background: var(--bg-value)，每次更新--bg-value时把整个background声明重写一遍（包括no-repeat、center/cover等） - 加
transition: background 0.3s ease，但仅对颜色渐变有效；图片切换仍会卡顿，得靠image-set()或预加载 - 更稳的做法：用JS先
new Image().src = nextUrl预加载，加载完成再更新CSS变量
移动端Safari下background-size: cover失效怎么办
不是失效，是100vh在地址栏收起/展开时会跳变，导致容器高度突变，背景重算滞后。解决方案很具体：
- 不用
100vh，改用min-height: 100vh+height: 100%，并确保所有祖先元素都有height: 100% - 监听
resize事件，用document.documentElement.clientHeight动态更新一个--vh变量，然后height: calc(var(--vh, 1vh) * 100) - 慎用
background-attachment: fixed——iOS上它会导致渲染异常甚至白屏
最麻烦的其实是字体缩放和横竖屏切换时的尺寸抖动，这时候vh单位比%更难控，不如退一步用min-height: 100%配display: flex居中更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
