Take the 2-minute tour ×

I use this CSS for create opacity in background of div:

-khtml-opacity: 0.5;
opacity: 0.5;

The problem in my case is that this way changes the color of font inside of div and the border color of div. Are there any alternatives that don't change the font's color?

share|improve this question
Basically no. What you have to do is have a wrapper at a higher level that holds the fading element, and then the font, and position the sub elements absolutely so the font is over the top of the fading element. –  Darren Crabb Oct 16 '13 at 17:20
I stand corrected! Looking at the answer below! ... you learn something every day! Although bear in mind RGBA won't work across ALL browsers. –  Darren Crabb Oct 16 '13 at 17:21
add comment

3 Answers

up vote 2 down vote accepted

When setting opacity, it is set for the whole div. If you want only want to make the background slightly transparent, you'll have to use rgba!


div {background-color: rgba(0, 0, 0, 0.5);} /* Black rgb(0,0,0) + 0.5 opacity */
div {background-color: rgba(255, 255, 255, 0.7);} /* White rgb(255,255,255) + 0.7 */ opacity

Ofcourse you have to integrate the background color that you had into the rgba code. The first three numbers are the normal red green blue values and the last one is the opacity (from 0 to 1).

Here is a useful tool to convert HEX values (like #ffffff) to rgba(a) values!

share|improve this answer
And if my background the color start it´s white ? where i can select the code of colours –  user2501504 Oct 16 '13 at 17:26
@user2501504 See my edit. –  Bram Vanroy Oct 16 '13 at 17:50
duh! kinda obvious now, but really helpful! thks! –  StinkyCat Feb 21 at 11:35
add comment

You can set opacity for background color:


See this example: http://jsfiddle.net/eaAmP/

share|improve this answer
add comment
.myelement {

For browsers support click here

 .myelement {
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
share|improve this answer
@user2501504 w3schools.com/html/html_colors.asp –  Vaibs_Cool Oct 16 '13 at 17:28
add comment

Your Answer


