css - 在css中设置背景不透明度

Question

我想在css中使元素的背景半透明。我知道有一种方法可以使用

background-color: rgba(100,100,100,0.5);

但我正在尝试在我的 rails 应用程序中动态创建 css，而我使用的变量是十六进制代码。是否有等效于 rgba() 的方法可以让我使用我的十六进制代码作为参数？

Answer 1

您可以在此处将十六进制代码转换为 rgb：http ://www.javascripter.net/faq/hextorgb.htm

编辑：

然后他可以用红宝石来做。

创建一个接受十六进制字符串的函数，将字符串分成三部分，然后像这样转换每一部分：

hex_part = "ff"    
hex_part.to_i 16

编辑2：

hex = "ff88­00"
hex_parts = hex.s­can(/.{1,2­}/)
hex_parts[0] = hex_parts[0].to_i 16 // Will make first part to dec.
hex_parts[1] = hex_parts[1].to_i 16
hex_parts[2] = hex_parts[2].to_i 16
dec = hex_p­arts.join(­",")  // Join the parts with a "," and you will get "255,136,0".

Answer 2

如果你将你的元素包含在一个 div 标签中，比如 class="opac"，你可以这样使用 jQuery：

$('.opac').animate({opacity: .2},500);

当触发特定事件时，这将使您的“opac”对象的不透明度为 20%，例如，如果单击带有 Add_Something 标记的 div 中的链接：

$('#Add_Something a').click(function() {
    $('.opac').animate({opacity: .2}, 500);
});

“500”只是物体变为半透明的速度......