:has() 无法触发 background-image 动态变更，因规范和浏览器实现均不支持；它仅适用于 display、opacity、color 等纯层叠属性，背景图切换必须依赖 js 控制 class。
伪类 :has() 在背景图切换中不生效
直接说结论：:has() 无法触发 background-image 的动态变更，因为 CSS 本身不允许在 :has() 选择器内使用属性依赖于 DOM 状态的背景图函数（比如 url() 引用外部资源），更关键的是——浏览器目前（截至 Chrome 125 / Safari 17.5 / Firefox 127）根本不支持在 :has() 内部写 background-image 变更规则。
这不是写法问题，是规范和实现双重限制。CSS 逻辑组合伪类（如 :has()）只允许影响“可继承”或“可层叠”的样式属性，而 background-image 的计算依赖资源加载时机，与选择器匹配阶段分离。
:has() 能安全驱动哪些视觉变化？
它适合控制显隐、颜色、尺寸、过渡等纯 CSS 层叠属性，前提是目标元素本身不依赖 JS 或异步资源加载。
-
display/visibility：可靠，但注意display: none会移出布局流，可能影响后续:has()判断 -
opacity/transform：推荐，配合transition做平滑反馈 -
border-color/color/background-color：完全支持，无兼容风险 -
background-image：❌ 不支持 —— 即使写成background-image: linear-gradient(...)，部分旧版 Safari 也会静默忽略整条规则
想根据输入内容换背景图？得绕开 :has()
真实场景里，比如 <input type="text"> 有值时显示「已填写」背景图，没值时显示「空状态」图——这必须靠 JS 驱动 class 切换，CSS 只负责定义样式。
立即学习“前端免费学习笔记（深入）”；
典型做法：
input.addEventListener('input', () => {
input.classList.toggle('has-value', input.value.trim() !== '');
});
对应 CSS：
.my-input { background-image: url('empty.svg'); }
.my-input.has-value { background-image: url('filled.svg'); }
注意点：
- 别用
change事件代替input，否则用户删光内容后 class 不会及时清除 -
trim()很关键，否则空格会被当成“有值” - 如果用
background-image加载远程图，记得提前预加载或 fallback 到background-color，避免闪白
Firefox 下 :has() 兼容性仍需手动开启
Firefox 默认关闭 :has() 支持（即使 127+ 版本），必须在 about:config 中把 layout.css.has-selector.enabled 设为 true 才能测试。线上项目不能依赖它做核心逻辑。
所以哪怕你写对了语法，用户用默认 Firefox 打开就是无效——这不是 bug，是现状。生产环境建议把 :has() 当作渐进增强，主逻辑始终走 JS + class 模式。
真正难的不是怎么写，是怎么让设计师接受：背景图切换这件事，CSS 真的管不了。
