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

Question

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

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

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

现在，如果您只有起始颜色怎么办？如果您从传递的颜色参数开始（假设它是在 MVC ViewModel 中传递的）怎么办？例如，您可能已经传递了一个“红色”值，并且您希望从“红色”开始的线性渐变到一些稍微亮一点的红色，以形成一个漂亮的渐变？

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

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

或

1. 一些渐变技巧可以用一种颜色自动创建渐变到该颜色的较浅版本？

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>