固定背景漸變動態寬度

我正在嘗試在遊戲中爲一名士兵做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 { 
 
\t position: absolute; 
 
\t bottom: 5%; 
 
\t width: 30%; 
 
\t height: 10px; 
 
\t background: linear-gradient(to left, #C7D9F8 60%, red); 
 
\t left: 5%; 
 
\t 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>

來源

2016-08-11 shamaseen

你能提供的jsfiddle？ –

「應該是50px寬度和10px高度」..如果您在「px」中設置了絕對尺寸的寬度和高度，則不會動態調整爲其父級大小。這與你的問題的這部分矛盾「問題是，我希望背景保持其寬度變化的梯度」 – repzero

@JuanFerreras在這裏:)。 – shamaseen

我已經採取了你的片段，並與絕對像素值的梯度替換您％的值。我也倒轉了漸變，使它從左到右，從紅色到另一種顏色。你可以檢查，如果你修改了欄的寬度，紅色仍然可見。

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 { 
 
\t position: absolute; 
 
\t bottom: 5%; 
 
\t width: 30%; 
 
\t height: 10px; 
 
\t background: linear-gradient(to right, red, #C7D9F8 30px); 
 
\t left: 5%; 
 
\t 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>

來源

2016-08-11 17:20:11

非常感謝你:) – shamaseen