Question

Hi Can you please take a look at following examole(code and link) and let me know why the color of the other elements inside a transparent div also change and how I can prevent this? I mean I like ti have the textbox and font color in white as I specified already but now they look grey!

Here is the link

As you can see from the link the text an inputs color inside the boxes changed to grey!
and this the code:

.test
{
    color:#FFF;
    border: solid 2px #2d2d2d;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    height: 180px;
    width: 250px;
    filter: alpha(opacity=60);
    opacity: 0.60;
    background: #000;
}

Answer 1

Using opacity on an element will affect all child elements as well. That’s the reason for why your text looks grey. To prevent this use a RGBA-color and set at the same time it’s transparency value.

I created a small demo that shows the differences.

And here’s the code for the background.

background: rgba(0, 0, 0, 0.6); /* The last value declares the transparency */ 

Hope this helps!