在CSS中设置背景不透明度

-1

我想在CSS中使元素的背景半透明。据我所知，有一种方法可以做到这一点使用在CSS中设置背景不透明度

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

，但我想动态地创建在我的Rails应用程序的CSS，我现在用的变量是一个十六进制代码。有没有相当于rgba（），这将允许我使用我的十六进制代码作为参数？

来源

2012-07-13 Huub Mons

background-color：＃十六进制代码不起作用？ – 2012-07-13 21:59:24

@RamanZhylich：但不允许设置不透明度。 – gopi1410 2012-07-13 22:00:07

为什么不使用[Color]（http://rubyforge.org/projects/color/）并进行转换。 – steveax 2012-07-13 22:03:44

您可以将您的十六进制代码在这里RGB：http://www.javascripter.net/faq/hextorgb.htm

编辑：

然后，他能做到这一点的红宝石。

创建一个函数，它的十六进制字符串，在三个部分分割字符串并转换这样每一部分：

hex_part = "ff"  
hex_part.to_i 16

编辑2：

hex = "ff8800" 
hex_parts = hex.scan(/.{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_parts.join(",") // Join the parts with a "," and you will get "255,136,0".

来源

2012-07-13 22:00:11

但他的十六进制代码是在一个变量。他不喜欢将它手动转换为rgba – gopi1410 2012-07-13 22:02:33

好吧，看我的编辑:) – 2012-07-13 22:47:01

如果您附上元素

一个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”仅仅是速度，其中，对象将变成半透明...

来源

2012-07-13 22:05:46 citraL

是的，但'opacity'会影响容器中的所有内容，而不仅仅是背景属性。 – steveax 2012-07-13 22:48:15

在CSS中设置背景不透明度

回答

相关问题