Positioning Web Elements in the Background Using CSS

Since opacity styles aren't part of CSS, it's been generally thought that such effects are effectively impossible. But there is a way to get a smooth translucency effect in Explorer for Windows, and Eric Meyer shows you how in this article.

This chapter is from the book

It's a common thing, at least in print design, to use shaded variations
of a background to make portions of the design stand out. A good example is
an ad in which there's a big picture of a mountain or beach or beautiful
woman filling the entire ad, and in the middle is some compelling yet meaningless
text, and surrounding that text is a region where the picture in the background
has been washed out, as if the text were written on a half-opaque block of plastic.

Since opacity styles aren't part of CSS as of this writing, it's
been generally thought that such effects are effectively impossible. There are
fixed-attachment backgrounds (see Project 11 in Eric Meyer on CSS for
more details), but they aren't supported by Explorer for Windows. One can
use semi-opaque PNG graphics, but they aren't supported by Explorer for
Windows. In fact, short of hacking the browser with proprietary behavior scripts,
there's only one way to get a smooth translucency effect in Explorer for
Windows, and that's by manipulating the position of background images.

Project Goals

We've taken on a project in which a local author is publishing some of
his short essays and wants them to look artistic. He's a big fan of
translucency effects, so he wants to see them used in his designs.
Specifically:

The author is supplying the images, so fortunately we don't have to
worry about acquiring them. All we really have to do is pull a little sleight of
style to get the translucency effects our client has requested.