Prevent text from getting opaque when using opacity property

Question

I just used opacity for background of content but the text in this div (I mean the content div) gets opaque as well and I cannot see the text of this div clearly.

I want to have the container elements background to be opaque but not the text.

div#content{
    color:white;
    width:1150px;
    background_color:black;
    opacity:.65;
    margin:0 auto;
    filter:alpha(opacity=65);
}

possible duplicate of [Transparent background, but not the content (text & images) inside it, in CSS only?](http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on) — Joonas, Apr 14 '14 at 06:26

score 2 · Accepted Answer · answered Apr 14 '14 at 06:15

First of all it's background-color or simply background but not ~~background_color~~ and secondly, what you need is rgba where a stands for alpha.

So when you want to make the background color opaque, say black opaque, than use

background-color: rgba(0,0,0,.65);

Demo

score 0 · Answer 2 · edited Apr 14 '14 at 06:18

0

Your CSS is less than best practice. It's ok to use #content rather than div#content as the id are always unique in a document.

Your background_color:black element is wrong. You should change that to background-color:black;

edited Apr 14 '14 at 06:18

mitchimus

830
1
10
24

answered Apr 14 '14 at 06:15

rockStar

1,296
12
22

Prevent text from getting opaque when using opacity property

2 Answers2

Linked