CODEWITHSUNDEEP
cssopacity
user2501504
user2501504

Reputation: 311

Css opacity and elements in div

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?

Upvotes: 0

Views: 346

Answers (3)

Bram Vanroy
Bram Vanroy

Reputation: 28437

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!

Upvotes: 2

Vaibs_Cool
Vaibs_Cool

Reputation: 6156

.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);
}

Upvotes: 0

user1633525
user1633525

Reputation:

You can set opacity for background color:

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

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

Upvotes: 0

Related Questions