CSS background transparency that doesn't affect the text on topCSS background transparency that doesn't affect the text on top

Posted May 12th, 2010 in HTML and CSS

A little while back I posted how to do cross browser transparency, using an example with some white text on top of a div with a black background which had opacity set to 75% so the content behind it could show though. As pointed out by a reader in the comments on that post, this makes the content contained within the element also transparent so this post shows a way to make the background opaque but the text on top of it not.

Working example

In the example below, the background color is black but it's been made to have an opacity of 0.50 making it appear grey. Anything underneath the block will be able to show through.

To show this I have included my logo off to the right. This is actually behind the main block below and yet it shows through because the main block is transparent.

 

This is some text sitting in the transparent/opaque block

This is some text sitting in the transparent/opaque block

This is some text sitting in the transparent/opaque block

This is some text sitting in the transparent/opaque block

The HTML

The HTML for the above example looks like this:

<div id="example-container">
  <div id="example-logo"><img width="32" height="32" alt="electric toolbox logo" src="/images/icons/toolbox.gif" /></div>
  <div id="example-background"></div>
  <p>This is some text sitting in the transparent/opaque block</p>
  <p>This is some text sitting in the transparent/opaque block</p>
  <p>This is some text sitting in the transparent/opaque block</p>
  <p>This is some text sitting in the transparent/opaque block</p>
</div>

The CSS

And the CSS looks like this:

#example-container {
  position: relative;
}
#example-background {
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter:alpha(opacity=20);
  -moz-opacity:0.20;
  -khtml-opacity: 0.20;
  opacity: 0.20;
  background-color: #000;
  position: absolute;
  width: 100%;
  height: 100%;
}
#example-logo {
  position: absolute;
  right: 10px;
  top: 10px;
}

How it works

Refer to the previous post which covers how transparency works.

The difference with what is done in the example in this post, is that there is a container (#example-container) whose position must be set to relative or absolute.

The first node within that container (#example-background) contains the opacity rules and has its width and height set to 100% so it is always the same size as the container. The position must be absolute so that anything else in the container does not appear after the background div.

Then after the first node put the content.

In the example presented in this post, I also have the #example-logo div which is contained within the container and is used to illustrate how it will show through because #example-background is opaque/transparent.

Browser support

I have tested the example in this post and can confirm it works in:

  • Chrome
  • Firefox - tested in 1.0 and 3.6
  • Opera - tested in 9.20 and 10.50
  • Safari - tested in 4.0.4 on Windows
  • IE7 and IE8 as long as a doctype is specified - I used <!DOCTYPE html> - it may not work if quirks mode is active

In IE6 it sort of works, but the height of the background div is only as high as the first paragraph.

Related posts:

Share or Bookmark

Share or Bookmark this page using the following services. You will need to have an account with the selected service in order to post links or bookmark this page.

Subscribe or Follow

Subscribe via RSS or email, or follow me on Facebook or Twitter below. The RSS icon takes you through to Feedburner where you can select the service or application to use.

Comments

blog comments powered by Disqus