时间戳

首页 > 解决方案 > 使用不透明度滑块修改动画 CSS 背景图像？

javascript - 使用不透明度滑块修改动画 CSS 背景图像？

问题描述

我想从我的第一个代码片段中控制动画 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">

标签： javascripthtmlcss

解决方案

在 HTML 中添加.imgP到（或在 JavaScript 中替换为。）.page-headerimgPpage-hader

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>

推荐阅读