Question

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

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

这会以蓝色开始渐变，并以浅蓝色结束。实际上并不漂亮，但它就是一个例子。

现在，如果你只有起始颜色怎么办？如果你从传递的颜色参数开始怎么办（想象它在MVC ViewModel中传递）？例如，您可能已经传递了红色＆＃39;的值，并且您希望从该开始的红色＆＃39;中获得线性渐变。用一些微红色的浅红色来制作漂亮的渐变色？

你需要知道，或转换，红色＆＃39;转换为十六进制值，然后通过操作十六进制数生成渐变停止颜色？是否有正常的＆＃39;这样做的方法？即

转换＆＃39; red＆＃39;十六进制值，如＃A11634
应用一些数学技巧来使A11634变得微妙的颜色＆＃39;？

OR

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

Answer 1

这是一个非常简单的解决方案，可以省去操纵颜色的麻烦;而不是将指定的颜色传递给渐变，将其设置为元素的background-colour，使用白色渐变作为background-image，从完全透明渐变到您想要减轻基色的数量。

这是一个使用background速记属性的示例，颜色从下到上过渡：

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

1 个答案: