我想在css中使元素的背景半透明。我知道有一种方法可以使用
background-color: rgba(100,100,100,0.5);
但我正在尝试在我的 rails 应用程序中动态创建 css,而我使用的变量是十六进制代码。是否有等效于 rgba() 的方法可以让我使用我的十六进制代码作为参数?
我想在css中使元素的背景半透明。我知道有一种方法可以使用
background-color: rgba(100,100,100,0.5);
但我正在尝试在我的 rails 应用程序中动态创建 css,而我使用的变量是十六进制代码。是否有等效于 rgba() 的方法可以让我使用我的十六进制代码作为参数?
您可以在此处将十六进制代码转换为 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".
如果你将你的元素包含在一个 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”只是物体变为半透明的速度......