从CSS文件(JS)中重新加载背景图像

Question

我有一个包含背景图像的CSS文件:在这种情况下，它是一个动画PNG。这个APNG有循环1，这意味着它只播放一次。我让它工作了，文件重新加载但现在我需要从CSS文件

中获取实际的背景url

FROM FILE: style.css
.my-div{
background-image: url("img/animation_menu_no_loop.png");
background-repeat: no-repeat;
pointer-events: none;
background-size: contain;
}
<div id="container" class="my-div">some text</div>

下面的工作很好，并重新启动动画时，在视口中:

document.getElementById('container').style.backgroundImage = 'url("img/animation_menu_no_loop.png'+'?a='+Math.random() +'")'

，但只有一个问题，我现在硬编码图像src，因为我已经从CSS文件。但是如果我更新CSS背景，我也需要更新样式。因此，我需要提取CSS文件中使用的实际URL。我怎么把它弄出来?

我的意思是从CSS文件中提取这一部分:

"img/animation_menu_no_loop.png"

Answer 1

我试着用一个类似的APNG文件重新创建，尽管这个文件似乎有更多的帧。即便如此，它还是会自动播放

是否可以上传你正在使用的代码，并将其链接到这个代码片段中用于测试目的

div {
width: 200px;
height: 200px;
background-color: gray;
background-repeat: no-repeat;
pointer-events: none;
background-size: contain;
/* background-image: url(https://gifimage.net/wp-content/uploads/2018/05/sparkler-gif-9.gif); */
background-image: url(https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png);
}

<p>Reload GIF</p>
<br/><br/><br/><br/><br/><br/><br/><br/><br/>
<div style="">
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

---

对于您的新问题:您可以将url的值放在一个变量中，如下所示:

:root {
--my-pnga: img/animation_menu_no_loop.png;
--my-pnga-url: url(img/animation_menu_no_loop.png);
}

然后在css中使用:

background-image: var(--my-pnga-url);

并使用javascript访问它:

let my_pnga = getComputedStyle(document.documentElement)
.getPropertyValue('--my-pnga');
document.getElementById('container').style.backgroundImage = `url("${my_pnga}?a='${Math.random()}'")`