浏览器禁用 :visited 的 background-image 是为防止通过样式侧信道探测用户历史访问，仅允许 background-color 等不可推断的纯色属性；其他背景相关属性均被静默忽略。
因为浏览器主动禁用了 :visited 对 background-image 的控制权，这不是 CSS 写法问题，而是隐私保护的硬性拦截。
浏览器为什么拦 background-image 而不拦 color？
color 本身无法被脚本反向探测出具体访问了哪个 URL；但 background-image（尤其是结合 width/height/position）可能被用于构造“样式侧信道”：通过 JS 测量元素渲染后的尺寸、布局偏移或加载行为，间接推断用户是否访问过某链接。现代 Chrome、Firefox、Safari 从 2010 年代起就逐步封禁这类高风险属性，只保留 color、background-color（纯色）、border-color 等真正“不可推断”的极少数颜色类属性。
background-image 在 :visited 下的实际表现
你写 a:visited { background-image: url(/check.svg); }，浏览器不会报错，但 DevTools 的 Styles 面板里这条声明会被打上灰色删除线（strike-through），且完全不生效。常见误判场景包括：
- 用
file://协议直接打开 HTML 文件 —— 多数浏览器默认禁用 :visited，所有样式都失效 - 测试时用了旧版浏览器（如 Chrome < 50），尚未启用该限制
- CSS 中
a:link没定义background-image，导致你以为 :visited 生效了，其实是回退到默认背景 - 目标页面跳转后未完整加载（如 SPA 中仅更新视图），浏览器未将其计入历史
:visited 还能安全改哪些和背景相关的样式？
唯一能用的背景相关属性是 background-color，但有严格限制：
立即学习“前端免费学习笔记（深入）”；
- 只接受纯色值：
#666、rgb(102, 102, 102)、darkgray✅ - 拒绝透明色：
rgba()、hsla()、带 alpha 的 hex（如#ff000080）❌ - 拒绝渐变：
linear-gradient()、radial-gradient()❌ - 拒绝其他 background 子属性：
background-position、background-size、background-repeat全部静默忽略
真要加图标或背景区分已访问链接，该怎么做？
放弃 :visited 是最现实的选择。可靠路径只有两条：
- 前端用
localStorage记录点击过的href，再通过 JS 给对应<a>添加class="visited-js"，然后用普通 class 控制任意样式（包括background-image、padding-left、font-weight） - 服务端在渲染 HTML 时，根据用户登录态和浏览日志，直接输出
data-visited="true"或class="visited-server"
注意：任何试图绕过浏览器限制的方案（比如监听 load 事件后强制重绘、用 IntersectionObserver 推断状态）在当前主流浏览器中均已失效——这不是兼容性问题，是安全策略的彻底关闭。
