浏览器禁用 :visited 的 background-image 是为防止历史窃取攻击；仅允许 color、background-color 等有限样式，禁用 background-image、transform 等可探测属性；替代方案为服务端加 class 或前端 localstorage 标记。
为什么 :visited 不能设置 background-image
浏览器主动禁用了这个能力，不是你写法错，是规范强制限制。核心原因是防止通过 CSS 侧信道窃取用户浏览历史：攻击者可以构造大量带不同 href 的链接，再用 JS 检测某个链接是否被访问过（比如通过 getComputedStyle 读取 background-image 是否生效），从而反推出用户隐私行为。
:visited 允许修改哪些样式
为平衡功能与安全，现代浏览器只允许对已访问链接应用极有限的样式变更：
- 颜色类属性：
color、background-color、border-color、outline-color - 文本类属性：
font相关（但不能通过font-family区分具体字体名）、text-decoration、text-shadow - 不支持：
background-image、transform、transition、animation、display、visibility等任何可能被探测的属性
常见错误现象和替代方案
你可能会遇到这些情况：
- 写了
a:visited { background-image: url(…); }，但完全没效果 —— 这是预期行为，不是 CSS 加载失败 - 用
getComputedStyle(el).backgroundImage检查时，始终返回"none"，哪怕链接确实被访问过 - 试图用
:visited配合opacity或filter做视觉反馈，结果无效 —— 这些也被禁止
替代做法只有两个方向：
立即学习“前端免费学习笔记（深入）”；
- 服务端记录访问状态，渲染时加 class（如
class="visited"），再用普通 class 控制background-image - 前端用
localStorage或sessionStorage手动标记点击过的链接，再动态添加 class
兼容性与实际影响
所有主流浏览器（Chrome、Firefox、Safari、Edge）从多年前就统一执行该限制，不存在“降级兼容”空间。即使你在旧版浏览器中看到 background-image 生效，也属于已被修复的历史漏洞，不应依赖。
真正容易被忽略的是：这个限制不仅作用于直接声明，还会影响层叠结果。比如父元素设置了 background-image，子 a:visited 即使只改 color，也不会触发重绘背景图 —— 因为整个伪类样式块在解析阶段就被剥离了非安全属性。
