css渐变：计算第二站颜色

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

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

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

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

来源

2013-01-18 dutchman711

我们需要更多的细节，你只提供了非常模糊的细节。 – Dai

不支持CSS，不支持。 – Shmiddty

看看这个链接 - 酷http://gradients.glrzad.com/也许你可以昵一些代码;） –

就这么你知道，你使用-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％的-opacity白了它）之间。要获得较暗的阴影，只需删除255-(255-位和相应的)。

编辑：关于第二个想法，只是用了坚实的背景与透明的渐变：

background:#ededed -webkit-linear-gradient(top,rgba(255,255,255,0),rgba(255,255,255,1));

来源

2013-01-18 19:40:14

太棒了，谢谢！这就是我一直在寻找的。 – dutchman711

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

来源

2013-01-18 19:36:19 N1tr0

css渐变：计算第二站颜色

回答

相关问题