使用不透明度滑塊修改動畫CSS背景圖像？

Question

我想通過我的第一個代碼片段控制動畫CSS背景圖像的不透明度。 因此，我想使用第二個代碼段中所示的滑塊。
這只是一個示例，但是我經常遇到這樣的情況：我不知道如何拍攝已經存在的圖像並將其用於其他操作。 在這種情況下我該怎么辦？

 .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"> 

Answer 1

添加.imgP到.page-header在HTML（或更換imgP與page-hader在JavaScript。）

 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; } .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 imgP"></div> <div style="position:absolute; top:0px; left:0px;"></div> <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> 

Answer 2

 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("page-header")[0]; range.addEventListener("input", function(value) { imgP.style.opacity = this.value / this.max; }); 

 .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%; opacity:1; } @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="range" style="position:absolute; top:10px; left:20px;bottom:20"> <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> <div class="page-header"></div> <div style="position:absolute; top:0px; left:0px;"></div>