...

View Full Version : opacity on div causes text to be opaque?!



jarv
01-06-2013, 11:51 AM
Hi,

On my site: http://www.jbiddulph.com/touchtile/

there is a block of opacity over the main header image containing some text which is also the same color which I tried to overwite the opacity on the H2 and P tags but that didn't work, I also tried z-index: 100; that also didn't work

Please help

CSS


#viewrange {
position: absolute;
bottom:62px;
left:0px;
background-color: #ffffff;
padding:6px;
margin:0px;
width:412px;
height: 148px;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=15)";
filter: alpha(opacity=15);
-moz-opacity:0.15;
-khtml-opacity: 0.15;
opacity: 0.15;
}
#viewrange h2 {
color: #ffffff;
z-index: 100;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity:1;
-khtml-opacity: 1;
opacity: 1;
}
#viewrange p {
color: #ffffff;
z-index: 100;
}

coothead
01-06-2013, 12:13 PM
Hi there jarv,

would "rgba(255,255,255,0.15)" be an acceptable option for you?

http://caniuse.com/#search=rgba

If not, then use this code...


#viewrange {
position:absolute;
bottom:62px;
left:0;
background-image:url(viewrange-bg.png);
padding:6px;
margin:0;
width:412px;
height:148px;
}

...with the png image in the attachment. ;)

coothead

Excavator
01-06-2013, 04:26 PM
Hey jarv,
See if this example helps - http://nopeople.com/CSS%20tips/opacity/index.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum