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

[zzm88104]

如题，最近刚知道 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>

[zcf0508]

你是指在 jsfiddle 里的 css 区域直接改吗，那是因为 jsfiddle 重新渲染了

你直接用 js 控制就可以了

document.getElementsByTagName('body')[0].style.setProperty('--color1', 'green')

[zzm88104]

@zcf0508 #1
https://imgur.com/a/gOGVTIe

不是 jsfiddle 重新渲染的闪白，是图片重新载入，如动图所示

[zzm88104]

。。。原来开着 f12 并且 diasble cache 才会闪，关掉 f12 或者 disable cache 就不闪了
@zcf0508 #1