I have a container for which I have set the opacity to 0.6 in css. I have another div inside the above container where I have some text with color:white say "MY TEXT". Now the problem is this text is getting fade as I want only the outer container to fade with opacity not the text. Can someone please help.
Below is the html code :
<div id='cover-part' style='text-align:center1;padding:15px'> <div id='opaque-cover-part'> <div id='cover-part-text'><span>THIS TEXT SHOULD NOT FADE</span></div> </div> Below is the CSS
#cover-part{ position: relative; background: url(posts/images/1.jpg) no-repeat 0 center, linear- gradient(white, black); height:250px; } #cover-part-text{ position:relative; font-size: 30px; color:#FFFFFF; left: 0px; bottom:0px; font-weight:bold; display:block; z-index:2; font-family: helvetica, arial, sans-serif; height:100px; width:100%; padding-left:15px; padding-top:15px; } #opaque-cover-part{ position: absolute; left: 0px; bottom:0px; height:100px; width:100%; background:linear-gradient(black, black); opacity:0.6; filter:alpha(opacity=50); z-index:1; } 
