从左到右填充渐变

Question

我在我的自定义htm5播放器中有音量滑块，我有问题，当你拖动这个音量滑块拇指时，它背后的一切都应该是蓝色，但背景颜色来自底部。我试过了：How to rotate background in CSS?

但它完全消失了。 我还使用javaScript来查找拖动的步骤数：

function updateSlider(slideAmount) {
  mediaPlayer.volume = slideAmount;
  $('#volumeAmount').css('background-position', '0 '+ slideAmount*100 +'%');
}

和html：

<input class="volume-slider" id="volumeAmount" type="range" value="1" max="1" step="0.01" onchange="updateSlider(this.value)" name="center"style="position:relative; left:40%; top:19%;"/>

和CSS：

#volumeAmount{
  width: 60px;
  position:absolute;
  top:10%;
  left:30%;
  margin: 0.8em 0.0em 0.0em;
}
#volumeAmount:after{
  -webkit-transform: skew(90deg, 0deg);
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, whiteSmoke 50%, #90C7E0  50%);
}

这是另一个问题的新版本，但这就是我所拥有的：

#volumeAmount{
  width: 60px;
  position:absolute;
  top:10%;
  left:30%;
  margin: 0.8em 0.0em 0.0em;
  -webkit-transform: skew(90deg, 0deg);
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, whiteSmoke 50%, #90C7E0 50%);
}

和一些图片：

Answer 1

为什么渐变从底部填充？

由于实际渐变及其定位的组合，它自下而上填充：

• 渐变为to bottom渐变，因此上半部分的颜色为白色，下半部分的颜色为#90C7E0。
• 在幻灯片上，渐变的位置在Y轴上增加，因此它自然会向上移动而不是朝向任何一侧。

下面的代码片段是一个带有div元素+动画（为简单起见）的有问题代码的演示。

div {
  width: 200px;  /* changed just for demo */
  height: 100px;  /* just for demo */
  background-size: 100% 200%;
  background-image: linear-gradient(to bottom, whitesmoke 50%, #90C7E0 50%);
  animation: fill 2s ease infinite;  /* just for demo */
}
@keyframes fill {
  to {
    background-position: 0 100%;
  }
}

<div>Hello</div>

如何让它从左到右填充？

您可以通过执行以下更改使其从左向右填充：

• 将渐变从to bottom渐变更改为to right渐变，因为填充应从左向右。
• 更改渐变的background-size，使其在X轴上为200％，在Y轴上为100％。
• 在幻灯片上，减少元素在X轴上的位置（即，转到-100% 0）。

下面是固定代码的演示。我再次使用div和动画完成了它，但它应该很容易理解更改并使其适应滑块（因为滑块已经工作）。

div {
  width: 200px;  /* changed just for demo */
  height: 100px;  /* just for demo */
  background-size: 200% 100%;
  background-image: linear-gradient(to right, whitesmoke 50%, #90C7E0 50%);
  animation: fill 2s ease infinite;  /* just for demo */
}
@keyframes fill {
  to {
    background-position: -100% 0;
  }
}

<div>Hello</div>