顏色小於50％時刪除漸變

Question

我製作了一個程序，該程序根據某些數值生成一個帶有2個背景色的div的HTML文檔。我發現了linear-gradient，我的代碼如下所示：

div { 
 
    width: 100%; 
 
    height: 5%; 
 
}

<div style="background: linear-gradient(to right, red 40%, green 60%);">.</div> 
 
<div style="background: linear-gradient(to right, red 60%, green 40%);">.</div>

我應該如何重寫我的代碼，這樣我就可以擺脫那種漸變的外觀時紅低於50％？我不想做2個不同的div每種顏色的，我想這linear-gradient這不是對我來說是最好的解決方案。無論顏色的百分比如何，我都希望所有div都看起來像第二個div。

Answer 1

百分比不是顏色佔據的空間，是元素中每種顏色的位置。你必須設置爲兩種顏色相同percentaje獲得了堅實的顏色：

div { 
 
width: 100%; 
 
height: 5%; 
 
}

<div style="background: linear-gradient(to right, red 40%, green 40%);">.</div> 
 
<div style="background: linear-gradient(to right, red 50%, green 50%);">.</div> 
 
<div style="background: linear-gradient(to right, red 30%, green 30% ,green 60%, blue 60%);">.</div>