的jQuery/CSS創建線性梯度僅具有一個顏色

Question

在CSS中，線性梯度的CSS看起來像：

background-image: linear-gradient(blue, lightblue); 

這將啓動梯度在藍色，在lightblue結束。實際上並不漂亮，但它是一個例子。

現在，如果您只有起始顏色，該怎麼辦？如果你開始使用顏色的傳遞參數（假設它是通過MVC ViewModel傳遞的）？例如，您可能已經傳遞了一個「紅色」的值，並且您希望從「紅色」開始到紅色的某種微小的顏色具有線性漸變以形成一個很好的漸變？

您是否需要知道或將「紅色」轉換爲十六進制值，然後通過操作十六進制數生成漸變停止顏色？有沒有一種「正常」的方式來做到這一點？即

1. 一些技巧，「紅色」轉變爲像＃A11634
2. 一些訣竅一個十六進制值應用一些數學來「做A11634一個微妙的顏色較淺」？

OR

一些梯度特技，自動將產生梯度用一種顏色，以該顏色的打火機版本？

Answer 1

這是一個非常簡單的解決方案，可以幫助您節省操作顏色的麻煩;不要將指定的顏色傳遞給漸變，而應將其設置爲您的元素的background-colour，並使用白色漸變作爲background-image，從完全透明漸變到您希望減少基本顏色的顏色。

以下是使用顏色過渡的background速記屬性從底部到頂部的例子：

div{ 
 
    background-image:linear-gradient(0deg,rgba(255,255,255,0),rgba(255,255,255,.75)); 
 
    height:100px; 
 
    margin:0 0 10px; 
 
} 
 
#red{ 
 
    background-color:red; 
 
} 
 
#green{ 
 
    background-color:green; 
 
}

<div id="red"></div> 
 
<div id="green"></div>