在css中设置背景不透明度[重复]

Posted 2023-02-23

【中文标题】在css中设置背景不透明度[重复]

【英文标题】：set background opacity in css [duplicate]

【发布时间】：2012-07-13 19:11:51

【问题描述】：

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

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

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

【问题讨论】：

背景颜色：#hex-code 不起作用？

@RamanZhylich：但这不允许设置不透明度。

为什么不直接使用Color 进行转换。

也在这里：RGB to Hex and Hex to RGB

【参考方案1】：

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

编辑：

然后他可以用 ruby​​ 来做。

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

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".

【讨论】：

但他的十六进制代码在一个变量中。他不喜欢手动将其转换为 rgba

【参考方案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'只是物体变成半透明的速度……

【讨论】：

是的，但是opacity 会影响容器中的所有内容，而不仅仅是背景属性。