jQuery / CSS 创建只有一种颜色的线性渐变

Question

在 CSS 中，线性渐变 css 看起来像：

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

这从蓝色开始渐变，以浅蓝色结束。实际上并不漂亮，但它可以作为一个例子。

现在，如果您只有起始颜色怎么办？如果您从传递的颜色参数开始（假设它是在 MVC ViewModel 中传递的），该怎么办？例如，您可能已经传递了一个 'red' 值，并且您想要从那个起始的 'red' 到一些稍微浅一点的红色的线性渐变来制作一个漂亮的渐变？

您是否需要知道或将“红色”转换为十六进制值，然后通过操纵十六进制数生成渐变停止颜色？有没有“正常”的方法来做到这一点？IE

1. 将“红色”转换为十六进制值的一些技巧，例如 #A11634
2. 一些技巧来应用一些数学来“使 A11634 的颜色更浅”？

或者

3. 一些渐变技巧来自动创建一种颜色的渐变，到该颜色的较浅版本？

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>