Css opacity and image

Question

I have image inside div with transparency , the problem it´s with this image , the div needs be trasparent but no the image , when use opacity in div the image also change to this opacity and that´s the problem

#cp_advise
{
position:absolute;
width:100%;
height:99%;
left:50%;
margin-left:-50%;
background-color:#111;
z-index:999;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=60);
-moz-opacity:0.6;
-khtml-opacity: 0.6;
opacity: 0.6;
text-align:center;
}




<div id="cp_advise">
<img src='services.png'>
</div>

I try use z-index over the image but continue the problem

Thank´s , Regards !

Answer 1

when you set opacity to a DIV, all contents get applied this property. You should set opacity only on the background.

Here you can find a complete explanation on how to do it, and cross-browser compatible

http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 2

Use a translucent colour on the div:

background-color:rgba(17,17,17,0.6);

Answer 3

Instead of using opacity, use rgba like background-color: rgba(255,255,255,.6);.

So in your case, the background color is background-color:#111;, so you can use

background-color: rgba(17,17,17,.6);

Where a stands for alpha. Also make sure you use background-color: #111; before declaring the background in rgba format, as a fallback.

background-color: #111; /* Fallback, and than declare rgba below */
background-color: rgba(17,17,17,.6);