背景用 var 时，如果另一个 var 更改了，背景会闪白

如题，最近刚知道 css 可以用 var 语法动态更新，但现在遇到了一个问题：如果背景用 var 的话，其他 var 变化的时候背景就会闪一下，如果是连续变化就会一直闪白。感觉原因是更新其中一个 var ，全部 var 都会重新载入一遍。。。

如何解决这个问题？

示例代码： 这个例子里，如果实时改变--color1 ，背景会一直闪白 https://jsfiddle.net/5ct9z6wL/

<div id='background_img'> </div> <span id="another_var">asdfadfs</span> <style> #background_img{ background: var(--background_img_url); width: 661px; height: 431px; } #another_var{ color:var(--color1); } :root{ --background_img_url:url('https://i.imgur.com/GHiyiSx.jpeg'); --color1:red; } </style>