Member Avatar for csteverun

What I am trying to achieve is a 3 layer effect. The first layer should be fully visible. The second layer should black but 50% transparent, showing through to the first layer's content. The third layer should be on top of the transparent layer, but fully visible (no transparency).

When I try this, the 3rd layer always inherits the opacity of the second layer (also 50% transparent) and for some reason is always behind the 2nd layer and can't be interacted with in the browser (even though it has a higher z-index), regardless of what I do. I have never been able to put anything fully visible or intractable over a transparent element.

Any takers?

  • 2 Contributors
  • 3 Replies
  • 102 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by csteverun
Member Avatar for csteverun

Finally figured it out. This works in Firefox and Internet Explorer IE.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Layers with Transparency</title>
<style type="text/css">
body {
	z-index:1;
	width:100%;
	height:100%;
	margin:0;
}
#darkscreen {
	z-index:2;
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-color:#000000;
	opacity:0.5;
	filter:alpha(opacity=50);
}
#widget1 {
	z-index:3;
	position:absolute;
	top:25%;
	left:25%;
	width:200px;
	height:200px;
	margin:auto;
	background-color:#FF6600;
	color:#FFFFFF;
}
#widget2 {
	z-index:1;
	position:absolute;
	top:50%;
	left:50%;
	width:200px;
	height:200px;
	margin:auto;
	background-color:#FF6600;
	color:#FFFFFF;
}
.thickborder {
	border:thick solid;
}
</style>
</head>
<body>

<div id="widget2">
	<b>I am a widget.</b>
	I should be in the background behind the dark screen and appear faded.
	<span style="color:#FFFFFF;border-color:#FFFFFF;" class="thickborder">white</span>
	<span style="color:#000000;border-color:#000000;" class="thickborder">black</span>
</div>

<div id="darkscreen"></div>

<div id="widget1">
	<b>I am a widget.</b>
	I should be clearly visible and in the foreground.
	My white should be white and my black should be black.
	<span style="color:#FFFFFF;border-color:#FFFFFF;" class="thickborder">white</span>
	<span style="color:#000000;border-color:#000000;" class="thickborder">black</span>
</div>

</body>
</html>
Member Avatar for Dsiembab

what's the widget for?

Member Avatar for csteverun

what's the widget for?

The widget is for popup dialogs, but could be used for other things.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.