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

Question

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

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

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

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

您是否需要知道或将 'red' 转换为十六进制值，然后通过操作十六进制数生成渐变终止色？有 'normal' 的方法吗？即

将 'red' 转换为十六进制值的一些技巧，如 #A11634
将一些数学应用到 'make A11634 a subtly lighter color'?

或

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

Answer 1

这里有一个非常简单的解决方案，可以让您免去处理颜色的麻烦；不要将命名的颜色传递给渐变，而是将其设置为元素的 background-colour，白色渐变为 background-image，从完全透明渐变到您想使基色变亮的程度。

这是一个使用 background shorthand 属性的示例，颜色从底部过渡到顶部：

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>

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

jQuery / CSS create linear gradient with only one color

css

colors

linear-gradients