Tengo un archivo CSS que contiene una imagen de fondo: en este caso es un PNG animado. Este APNG tiene el bucle 1, lo que significa que solo se reproduce una vez. Lo tengo funcionando para que el archivo se vuelva a cargar, pero lo que ahora necesito es obtener la URL de fondo real del archivo CSS
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>Lo siguiente funciona bien y reinicia la animación cuando está en la ventana gráfica:
document.getElementById('container').style.backgroundImage = 'url("img/animation_menu_no_loop.png'+'?a='+Math.random() +'")'pero solo hay un problema, ahora codifiqué la imagen src como la tomé del archivo CSS. Pero si actualizo el fondo CSS, también necesito actualizar la línea 'style.background', por lo que necesito extraer la URL real utilizada en el archivo CSS. ¿Cómo puedo sacar eso?
Me refiero a extraer esta sección del archivo CSS:
"img/animation_menu_no_loop.png"He intentado recrear con un archivo APNG similar, aunque este parece tener más fotogramas... Aun así, se reproduce automáticamente
¿Es posible cargar el que está usando y vincularlo en este fragmento con fines de prueba?
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/>Para su nuevo problema: puede colocar el valor de la URL en una variable, así:
:root { --my-pnga: img/animation_menu_no_loop.png; --my-pnga-url: url(img/animation_menu_no_loop.png); }Luego para usarlo en el css:
background-image: var(--my-pnga-url);Y para acceder a él con javascript:
let my_pnga = getComputedStyle(document.documentElement) .getPropertyValue('--my-pnga'); document.getElementById('container').style.backgroundImage = `url("${my_pnga}?a='${Math.random()}'")`