Spectrum colorpicker 获得具有透明度的颜色

Posted 2023-02-16

【中文标题】Spectrum colorpicker 获得具有透明度的颜色

【英文标题】：Spectrum colorpicker get color with transparency

【发布时间】：2013-02-28 07:01:54

【问题描述】：

我使用 jQuery 插件 Spectrum 作为颜色选择器：

$('#backgroundColorPicker').spectrum(
    color: '#000',
    showAlpha: true,
    move: function(color)
        $('#result').css('background-color',color.toHexString());
    
);

在此处查看此代码：http://jsfiddle.net/UkmXM/1/。

如您所见，我将showAlpha 设置为true 以启用透明背景。但是，我没有得到透明背景。

【参考方案1】：

十六进制字符串不支持透明度。改用color.toRgbString()：http://jsfiddle.net/UkmXM/2/

$('#backgroundColorPicker').spectrum(
    color: '#000',
    showAlpha: true,
    move: function(color)
        $('#result').css('background-color',color.toRgbString());
    
);

【讨论】：

我不知道为什么这会被否决，并希望看到一个解释。

您的答案显然是正确的，所以也许有人因为接受您自己的答案而对您投了反对票？如果是这样，他们不知道在此鼓励回答您自己的问题并接受答案，以此作为分享此类信息的一种方式。

没有任何其他答案，我也没有得到代表。

对，这就是为什么我的猜测是有人（错误地）认为，“那家伙在做什么 - 给自己一些代表？”无论如何，不​​要让它影响到你 - 继续分享这样的提示！

@MichaelGeary 哦，我不是故意要批评你的；）我们在一条线上。

【参考方案2】：

我在the TinyColor docs:toHex8String找到它

【参考方案3】：

在这个 javascript 库中，toHex8String() 当前返回 RGBA 之前的 RGBA 的 alpha 分量，例如 E.G.一个白色的半透明十六进制代码，应该是：#FFFFFF80 而不是返回#80FFFFFF，它是蓝绿色的。

已建议修复：https://github.com/seballot/spectrum/issues/31，但与此同时，您可以通过独立提取 alpha 值并将其附加到十六进制字符串来获得透明颜色，如下所示：

color.toHexString() + pad2(convertDecimalToHex(color._a)