的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>