set background opacity in css

Question

I want to make the background of an element semi-transparent in css. I am aware that there is a way to do this using

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

but I am trying to dynamically create the css in my rails application, and the variable I am using is a hex code. Is there an equivalent to rgba() that will allow me to use my hex code as a parameter?

Answer 1

You can convert your hex code to rgb here: http://www.javascripter.net/faq/hextorgb.htm

Edit:

Then he can do it in ruby.

Create a function that takes the hex-string, split the string in three parts and convert each part like this:

hex_part = "ff"    
hex_part.to_i 16

Edit 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

if you enclose your element in a div tag with, let's say, class="opac", you can just use jQuery that way:

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

this will make your 'opac' object's opacity to 20% when a particular event is triggered, for instance, if a link within a div tagged with Add_Something is clicked:

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

'500' is just the speed in which the object will become semi-transparent ...