Overlapping Opacity

In the last article, I showed very briefly styles and structures that included opacity. This time I’m going to focus on that exclusivley along with some examples.

First off, let’s look at how we add opacity, including the Internet Explorer-specific method for cross-browser compatibility.

.opaque {
	background-color: gold
	width: 5.0em;
	opacity: 1.0;
	filter: alpha(opacity=100); /* IE-specific */
}

.translucent {
	background-color: gold
	width: 5.0em;
	opacity: 0.5;
	filter: alpha(opacity=50); /* IE-specific */
}

.transparent {
	background-color: gold;
	width: 5.0em;
	opacity: 0.0;
	filter: alpha(opacity=0); /* IE-specific */
}
<div class="opaque">Some text</div>
<div class="transparent">Some text</div>
<div class="translucent">Some text</div>

gives us the following. Note that I’ve put the transparent <div> between the opaque and translucent ones so you know where it is.

now, what if you want the text to be opaque against a translucent background? The problem is, the text is a child of the <div> and opacity is inherited.  We can overcome this problem using multiple <div> tags and positioning.

<div id="outer_div" class="outer">
	<div id="background_div" class="translucent">&nbsp;
	</div>
	<div id="content_div" class="cover_text">
		Some Text
	</div>
</div>

And let’s add the two style definitions, cover_text and outer

.outer {
	height: 1.1em;
	position:relative;
}

.cover_text {
	position: absolute;
	height: 1.1em;
	top: 0px;
	left: 0px;
}

Height was included as the only element containing content had position: absolute. You could get around this by adding some text to background_div and setting the color the same as the background-color. Both work just as well.

Now we have:

Well, now that we have that, what about overlapping opacity like the title says?

Lets look at a few different cases.

.big_red_box {
	height: 10em;
	width: 10em;
	background-color: red;
	position:relative;
}
.medium_yellow_box {
	height: 6em;
	width: 6em;
	top: 2em;
	left: 2em;
	background-color: yellow;
	position:absolute;
}

.small_blue_box {
	height: 2em;
	width: 2em;
	top: 2em;
	left: 2em;
	background-color: blue;
	position:absolute;
}

Making the <div>s nested, largest->smallest gives us

Remember that opacity is inherited so our blue box will acquire the same opacity as the yellow box. Adding opacity:0.5; filter: alpha(opacity=50); to .medium_yellow_box, we get:

What if we want the blue box to be opaque? Just like the text example before, we don’t make it a child. You’d need to change the position attributes top and left to reflect its position within it's new parent

<div class="big_red_box">
	<div class="medium_yellow_box">&nbsp;
	</div>
	<div class="small_blue_box">
		&nbsp;
	</div>
</div>

<div style="position:relative;height:3em;width:3em;">
<div style="position:absolute;left:0em;top:0em;height:2em;width:2em;opacity:0.5;filter:alpha(opacity=50);background-color:red;float:left;">&nbsp;</div>
<div style="position:absolute;top:0em; left:1em;height:2em;width:2em;opacity:0.5;filter:alpha(opacity=50);background-color:blue;float:left;">&nbsp;</div>
<div style="position:absolute;top:1em;left:0.5em;height:2em;width:2em;opacity:0.5;filter:alpha(opacity=50);background-color:yellow;margin-bottom:1em;">&nbsp;</div></div>