V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
Can I use?
http://caniuse.com/
Less
http://lesscss.org
Cool Libraries
Bootstrap from Twitter
Jetstrap
zzm88104
V2EX  ›  CSS

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

  •  
  •   zzm88104 · 2022-06-03 00:07:51 +08:00 · 1305 次点击
    这是一个创建于 665 天前的主题,其中的信息可能已经有所发展或是发生改变。

    如题,最近刚知道 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>
    
    3 条回复    2022-06-03 10:46:13 +08:00
    zcf0508
        1
    zcf0508  
       2022-06-03 00:53:41 +08:00   ❤️ 1
    你是指在 jsfiddle 里的 css 区域直接改吗,那是因为 jsfiddle 重新渲染了

    你直接用 js 控制就可以了

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

    不是 jsfiddle 重新渲染的闪白,是图片重新载入,如动图所示
    zzm88104
        3
    zzm88104  
    OP
       2022-06-03 10:46:13 +08:00
    。。。原来开着 f12 并且 diasble cache 才会闪,关掉 f12 或者 disable cache 就不闪了
    @zcf0508 #1
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1191 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 23:18 · PVG 07:18 · LAX 16:18 · JFK 19:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.