Is there a way to adjust the opacity of a CSS background-image animation? My goal is to incorporate a slider for this purpose. This scenario presents just one instance, but I often encounter challenges in repurposing existing images for different tasks. How can such situations be handled?
.page-header:after {
animation: img1 .85s infinite linear;
background-image: url(https://i.imgur.com/LZJVN0S.png);
content: "";
z-index: 100;
pointer-events: none;
height: 300%;
left: -50%;
opacity: 1;
position: fixed;
top: -110%;
width: 300%;
}
@keyframes img1 {
0% {
background-position: top 150px left 120px, 110px 90px;
}
50% {
background-position: top 150px left 100px, 362px 90px;
}
100% {
background-position: top 150px left 120px, 615px 90px;
}
}<div class="page-header"></div>
<div style="position:absolute; top:0px; left:0px;"></div>var rangeVal = document.getElementById('rangevalue');
var range = document.getElementById('range');
var updateVal = function(val) {
rangeVal.innerHTML = val;
rangeVal.style.left = val + '%';
};
updateVal(range.value);
var imgP = document.getElementsByClassName("imgP")[0];
range.addEventListener("input", function(value) {
imgP.style.opacity = this.value / this.max;
});.imgP {
opacity: 1;
}<div class="range" style="position:absolute; top:10px; left:20px">
<input type="range" id="range" value="100" min="0" max="100" step="1" oninput="updateVal(this.value)" style="position:fixed; top:32px; left:8px">
<div id="rangevalue" class="range-thumb"></div>
<img class="imgP" height="imageheight" width="imagewidth" src='https://png.icons8.com/nolan/50/000000/percentage.png' style="position:fixed; top:56px; left:18px">