我正在做的自定义 htm5 播放器中有音量 slider ,但我遇到了问题,当您拖动此音量 slider 拇指时,它后面的所有内容都应该是蓝色的,但背景颜色来自底部。我试过: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%);
}
最佳答案
为什么渐变从底部开始填充?
由于实际梯度及其定位的结合,它是自下而上填充的:
- 渐变是
到底部
的渐变,因此上半部分的颜色为 whitesmoke,下半部分的颜色为#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
和动画完成了它,但它应该很容易理解更改并使其适应您的 slider (因为 slider 已经在工作)。
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>
关于javascript - 从左到右填充渐变,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37582336/