0

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

filter:alpha(opacity=50);
-moz-opacity:0.5;
-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?

2
  • 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. Oct 16, 2013 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. Oct 16, 2013 at 17:21

3 Answers 3

2

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!

Example:

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!

2
  • And if my background the color start it´s white ? where i can select the code of colours Oct 16, 2013 at 17:26
  • duh! kinda obvious now, but really helpful! thks!
    – StinkyCat
    Feb 21, 2014 at 11:35
0

You can set opacity for background color:

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

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

0
.myelement {
    background: rgba(200, 54, 54, 0.5);
}

For browsers support click here

 .myelement {
    background: rgba(200, 54, 54, 0.5);
    -pie-background:  rgba(200, 54, 54, 0.5);
    behavior: url(PIE.htc);
}
0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.