固定背景渐变与动态宽度

Question

我正在尝试为游戏中的士兵做HP吧。

条形宽度应为50px，高度为10px（初始化时）。

它应该是这样的：

随着HP的减少，宽度将减小。

问题是我希望背景在宽度变化时保持其渐变，例如当宽度达到10px时，我只想要保留红色，例如：

有没有办法用css ??

来做到这一点

注意：我正在使用栏的绝对位置，而且它是一个大父div的孩子。 注2：我对所有元素使用宽度和高度的百分比值，这些绝对值应该是1366宽度和670高度的文档。

代码段：

function changeWidth()
{
    $("#hp").css("width","10%");
}

function reset()
{
  $("#hp").css("width","30%");
}

#cont {width:170px; height:170px; background:#000; position:relative}
#hp {
	position: absolute;
	bottom: 5%;
	width: 30%;
	height: 10px;
	background: linear-gradient(to left, #C7D9F8 60%, red);
	left: 5%;
	transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="cont">
  <div id="hp"></div>
</div>

<button onclick="changeWidth()"> Run</button>
<button onclick="reset()"> Reset</button>

Answer 1

您可以在linear-gradient背景中使用绝对值。例如，无论元素的宽度如何，background:linear-gradient(90deg, red 10px, blue 20px);都会在元素左边的10px和20px之间提供从红色到蓝色的渐变。

我在下面的小提琴中加入了这个，以及另一种可以用meter标签更改条形颜色的方法。

https://jsfiddle.net/jcwjptu8/

Answer 2

我已经拿走了你的代码片段并用渐变像素值替换了渐变上的％值。我也颠倒了渐变，所以它从左到右，从红色到另一种颜色。您可以检查如果修改条的宽度，红色仍然可见。

background: linear-gradient(to right, red, #C7D9F8 30px);

以下完整摘录：

function changeWidth()
{
    $("#hp").css("width","10%");
}

function reset()
{
  $("#hp").css("width","30%");
}

#cont {width:170px; height:170px; background:#000; position:relative}
#hp {
	position: absolute;
	bottom: 5%;
	width: 30%;
	height: 10px;
	background: linear-gradient(to right, red, #C7D9F8 30px);
	left: 5%;
	transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<div id="cont">
  <div id="hp"></div>
</div>

<button onclick="changeWidth()"> Run</button>
<button onclick="reset()"> Reset</button>