在 rgba 中实时编辑 RGB 值

Question

我正在构建一个网站，希望用户能够更改其中一个 div 的颜色。颜色是用 rgba 设置的，因为我希望它是透明的。

我遇到的问题是，我找到了一个颜色选择器，但我更改了 RGB，而没有搞砸不透明度。到目前为止，我是这样的：

<input class="color" type="text" onchange="document.getElementById('main-info').style.backgroundColor = '#' + this.color;">

很明显，我正在用 hex 替换 rgba for live 版本，这会消除不透明度。我尝试过的其他事情是：

<input class="color" type="text" onchange=" document.getElementById('id_info_box_bg_color').value = (Math.floor(this.color.rgb[0]*255)) + ', ' + (Math.floor(this.color.rgb[1]*255)) + ', ' + (Math.floor(this.color.rgb[2]*255));">

成功获取 rgba 值，但我无法将其正确插入 rgba。

任何人都知道我可以如何替换部分 rgba？所以我只是改变了 rgba(X, X, X, .5) 中的 Xs

Answer 1

不知道能不能只替换一部分rgba值，但是如果在css中用rgba设置了div的颜色，可以通过询问css属性来检索rgba字符串值：

$('#myDiv').css('background-color');

这将返回一个看起来像这样的字符串（例如）："rgba(255, 0, 0, 0.496094)" 或者，如果不透明度设置为 1，则返回 "rgb(255, 0, 0)" 来自这可以解析出 alpha 通道值并在设置新的 rgba 值时使用它。我敢肯定有比我更聪明的人可以找到一种从字符串中提取该值的有效方法（或者至少不像我那么懒惰。）当你想为 div 设置新颜色时：

$('#myDiv').css('background-color', 'newColor');

其中新颜色是您构造的字符串，其格式与您在 css 中设置或随后检索它时的格式相同，如上所示，使用从原始字符串中提取的相同 alpha 值。

Answer 2

您应该能够使用 css 获得相同的净效果

#id_info_box_bg_color {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // ms ie 8 first!
  filter: alpha(opacity=50);                    // rest of the ie browsers second!
  opacity: .5;  // standard compliant browsers
}