¿Lo que quiero?
Quiero manipular una parte específica de un valor de propiedad css con una entrada de rango HTML.
/* an example CSS */ .background-img { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(wallpaper.jpg); }Digamos que quiero cambiar solo las partes alfa (opacidad) de este código css rgba con mi entrada de rango html aquí;
<input class="range-input" type="range" min="0" max="0.999" value="0.5" step="0.010" />¿Es posible manipular una parte específica de un valor de propiedad css con js? ¿Cómo puedo conectar este elemento de entrada html al valor de la propiedad css de la imagen de fondo, no al valor total sino a la parte o partes de la opacidad?
Lo siguiente podría servir como punto de partida para lo que está tratando de hacer:
var input = document.getElementById("range-input"); let root = document.documentElement; input.onchange = function() { root.style.setProperty('--opacity', input.value); }; :root { --opacity: 1.0; } .background-img { width: 200px; height: 100px; background-size: 200px 100px; background-image: url(https://variety.com/wp-content/uploads/2021/07/Rick-Astley-Never-Gonna-Give-You-Up.png?w=1024); opacity: var(--opacity); } <input class="range-input" id="range-input" type="range" min="0" max="0.999" value="0.5" step="0.010" /> <div class="background-img"></div>