小编jam*_*am2的帖子

当我将鼠标悬停在页面上时，我注意到页面上的按钮闪烁（会改变不透明度）。经过一番挖掘，发现每次样式更新时，浏览器都会重新下载该图像。

这发生在 Mac Chrome 74 和 Safari 上。Firefox 看起来不错。

这些按钮使用带有 CSS 变量的 background-image 样式，代码如下所示：

body {
    --src-image: url("some image");
}

.btn {
    background-image: var(--src-image);
}

.btn:hover {
    opacity: 0.7;
}

代码笔：https ://codepen.io/polyamide/pen/qzEVzO

复现步骤：

1. 打开 DevTool 并禁用缓存。
2. 将鼠标悬停在第二张图片上（这个使用 CSS 变量，而第一个没有）。
3. 请参阅网络面板。样式更新时会有新的请求。

避免使用 css 变量解决了问题，但我仍然想了解为什么会发生这种情况，我该如何解决？