opacity on div causes text to be opaque?!

[jarv]

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]

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]

Hey jarv,
See if this example helps - http://nopeople.com/CSS%20tips/opacity/index.html