0

我希望能够根据第一个计算按钮背景渐变的第二个十六进制颜色（参见下面的示例）。

因此，我将通过用户的颜色选择器获得第一种颜色，并使用 Javascript 获得它（例如，下面示例中的#ededed）。基于第一种颜色，我想使用 JS 计算产生第二种颜色和渐变效果的偏移量（下面示例中的#dfdfdf）。颜色偏移总是相同的，只是输入和输出的十六进制颜色会不同。

有我可以使用的公式或函数吗？谢谢！

background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
4

2 回答 2

1

请注意，您正在使用“旧”格式的-webkit-gradient. 您应该更新为使用它：

-webkit-linear-gradient(top, #ededed 5%, #dfdfdf)

现在，关于实际问题，您尚未指定应如何计算第二种颜色。考虑到你给出的例子，我会假设你想要一个更轻的阴影。在这种情况下，您可以这样做：

var color = "#ededed";
var components = [
    (255-(255-parseInt(color.substr(1,2),16))/2).toString(16),
    (255-(255-parseInt(color.substr(3,2),16))/2).toString(16),
    (255-(255-parseInt(color.substr(5,2),16))/2).toString(16)
];
if(components[0].length < 2) components[0] = "0"+components[0];
if(components[1].length < 2) components[1] = "0"+components[1];
if(components[2].length < 2) components[2] = "0"+components[2];
var out = "#"+components[0]+components[1]+components[2];

这将为您提供介于源颜色和纯白色之间的颜色（有效地在其上覆盖 50% 不透明度的白色）。要获得更深的阴影，只需删除该255-(255-位和相应的).

编辑：再三考虑，只需使用带有透明渐变的纯色背景：

background:#ededed -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));
于 2013-01-18T19:40:14.567 回答
0

我没有对此进行测试，但我的方法是使用 RGB 值而不是十六进制。然后使用变量来保存你的两个颜色值。第二个变量可以根据第一个变量的值（如@color2 = @color1 + 2）或其他值来计算。

于 2013-01-18T19:36:19.157 回答