Question

我想从我的第一个代码段控制动画CSS背景图片的不透明度。因此，我想使用我的第二个代码段中看到的滑块这只是一个例子，但我经常遇到的情况是我不知道如何拍摄已有的图像并将其用于其他操作。在这种情况下我该怎么办？

＆＃13;

.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;
  }
}

＆＃13;

<div class="page-header"></div>
<div style="position:absolute; top:0px; left:0px;"></div>

＆＃13;

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;
});

＆＃13;

.imgP {
  opacity: 1;
}

＆＃13;

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

＆＃13;

Answer 1

在HTML中将.imgP添加到.page-header（或在JavaScript中将imgP替换为page-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>

Answer 2

＆＃13;

.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;}

＆＃13;

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

＆＃13;

=sparkline()

＆＃13;

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

2 个答案: