Question

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

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

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

显然我正在用实时版本替换rgba for hex，这会杀死不透明度。我尝试过的其他事情是：

<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，X，.5）

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
}

在rgba中实时编辑RGB值

2 个答案: