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

2022-06-03 00:07:51 +08:00
 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>
1448 次点击
所在节点    CSS
3 条回复
zcf0508
2022-06-03 00:53:41 +08:00
你是指在 jsfiddle 里的 css 区域直接改吗,那是因为 jsfiddle 重新渲染了

你直接用 js 控制就可以了

document.getElementsByTagName('body')[0].style.setProperty('--color1', 'green')
zzm88104
2022-06-03 10:24:24 +08:00
@zcf0508 #1
https://imgur.com/a/gOGVTIe

不是 jsfiddle 重新渲染的闪白,是图片重新载入,如动图所示
zzm88104
2022-06-03 10:46:13 +08:00
。。。原来开着 f12 并且 diasble cache 才会闪,关掉 f12 或者 disable cache 就不闪了
@zcf0508 #1

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/857047

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX