Crossbrowser monochrome translucency

In this article I will discuss the method of creating blocks with a one-color translucent background.
For example, such:


At once I will make a reservation that I will not use opacity and absolute positioning to place the content on top of a semi-transparent block.

So, we need to make a block with a monochromatic translucent background. To do this, you can use the opacity property, but everyone knows that it applies not only to the element itself, but also to its children. You can, of course, cheat and apply opacity to the substrate element, and place the content in another block, and then move this block onto the substrate element using absolute positioning. But this method has significant drawbacks, firstly, it is necessary to know the exact dimensions of the block, and, secondly, extra non-semantic elements are added.

All these drawbacks can be avoided if instead of opacity you use a single-pixel image of the desired color with a given transparency. But, in this case, an extra http request will occur, which is undesirable.
')
In CSS3, it became possible to set the background color of an element using RGBA; this is essentially the same RGB but with the ability to specify the transparency value.

.opacity {
background: rgba(0, 0, 0, 0.5);
}


example (RGBA)

But, unfortunately, setting the background color via RGBA is supported only in new versions of Safari (Chrome too) and Firefox. For older versions of Safari, Firefox, as well as Opera and IE8 (Hurray!), You can use Data: URI : to get rid of the extra http request.

.opacity {
background:url(data:image/png;base64,iVBORw0KGg...);
}

example (Data: URI)

Where, iVBORw0KG... is our one-pixel translucent base64-encoded image. Such a presentation file is quite simple. You can, for example, use the Data: URI image encoder .

Combining together these two ways we get:

.opacity {
background:url(data:image/png;base64,iVBORw0KGg...);
background:rgba(0, 0, 0, 0.5);
}

example (RGBA + Data: URI)

This example is already working for FF 1.5+, Opera 7.2+, Safari 2+, Chrome, Konqueror, IE 8.
But what about IE 7 and IE 6? Here we can use the Alpha filter and one little trick. The fact is that if you apply an Alpha filter to an element and then give all the descendants of this element position: relative; then they miraculously become completely opaque:

.opacity {
zoom:1; /* hasLayout */
background:#000;
filter:alpha(opacity=50);
}

.opacity * {
position:relative;
}


example (IE 6 and 7)

So, combining everything together we get:

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" xml:lang ="ru" >
< head >
< title > Opacity Block </ title >
< meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" />
< style type ="text/css" >
* {
margin:0;
padding:0;
}

html {
font-size:100.01%;
}

body {
font:.8em Arial, Helvetica, sans-serif;
color:#fff;
background:url(bg_pattern.jpg);
}

a {
color:#fff;
}

h1 {
font-weight:normal;
margin:0 0 .5em;
}

p {
margin:0 0 .5em;
}

.opacity {
margin:40px;
padding:20px;
background:url(data:image/png;base64,iVBORw0KG...);
background:rgba(0, 0, 0, 0.5);
}
</ style >
<!--[if lte IE 7]>
<style type="text/css">
.opacity {
zoom:1;
background:#000;
filter:alpha(opacity=50);
}
   
.opacity * {
position:relative;
}
</style>
<![endif]-->
</ head >
< body >
< div class ="opacity" >
< h1 > ! </ h1 >
< p > . </ p >
</ div >
</ body >
</ html >

* This source code was highlighted with Source Code Highlighter .

final result

The sample has been tested and works correctly in IE 6+, FF 1.5+, Opera 7.2+, Safari 2+, Chrome, Konqueror 4.1. Out of flaws, does not work in IE <6.