每次样式更新时，浏览器都会下载背景图片（使用 CSS 变量设置），为什么？答案

【问题标题】：Browser downloads background image (set using CSS variables) every time style updates, why?每次样式更新时，浏览器都会下载背景图片（使用 CSS 变量设置），为什么？
【发布时间】：2019-10-26 17:55:28
【问题描述】：

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

这发生在 Mac Chrome 74 和 Safari 上。火狐似乎不错。

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

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

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

.btn:hover {
    opacity: 0.7;
}

Codepen：https://codepen.io/polyamide/pen/qzEVzO

复制步骤：

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

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

【问题讨论】：

这是一个很好的问题！我的猜测是，css 每次必须更新元素的样式时都会重新计算变量值，这会触发 URL 调用（因为在这种情况下是悬停）。我在任何地方都没有发现这个记录。
如果你用变换改变不透明度，它甚至会发生

标签： css css-variables

【解决方案1】：

我对 Safari 和 Firefox 也有同样的问题。没有闪烁的唯一方法是不使用图像变量：

background-image: url("some image");

我已经尝试了很多解决方案，例如添加这个：

-webkit-transform-style: preserve-3d;

但那些“解决方案”根本不起作用。

【讨论】：