Transparent Background Color, but only transparency

Question

I need to add transparency to background color that will change user. Like if user set background color to #f00 i need to add 0.5 transparency to that. I cant use rgba() because i get color in #RGB format. I cant add transparency to all of content.

Answer 1

With your help i found the best solution for me list($r,$g,$b) = array_map('hexdec',str_split($colorName,2)); echo 'rgba('.$r.','.$g.','.$b.',0.5)'; Thanks to all

Answer 2

You could use a hack if your content is always the same height.

Use three divs. One div holds the other two. One div is the background.

One div is the foreground/ non-transparent content.

<div id='holder'>
<div id='bg'>

</div>
<div id='content'>
Content is here
</div>
</div>

Then in css. make the position of bg and content relative so that the inside divs appear one on top of the other. You might also have to use zIndex or (something like this):

#bg {
opactiy: .5;
background-color:#333;
position: relative;
top: 0px;
left: 0px;
height: 300px;
    }

#content {
position: relative;
top: -300px; // negative of the height
left: 0px;
}

Admittedly, this could easily get messy! Hope it helps.

Answer 3

Javascript can do the trick. I'll assume you're using jQuery since you mentioned it.

View the fiddle here

If you can use jQuery to get the color, it will return a string in the format of 'rgb(x,x,x)'. Then you can use a function to convert it to an rgba string.

function rgbToRgba(rgbString, alpha) {
    rgba = rgbString.replace( 'rgb', 'rgba' );
    rgba = rgba.replace( ')', ',' + alpha + ')' );
    return rgba;
}

Then you can set the css with the new value.

var color = $('.makeMeRgba').css('background-color');
var rgba = rgbToRgba(color, 0.5);

$('.makeMeRgba').css('background-color', rgba);

Answer 4

If you can't use rgba, css opacity should be a option, but will fade all content inside. I guess the solution can be a tiny png, not beyond this.

Maybe: Try to use css opacity and create another div inside, and use z-index to control the content opacity.