Using RGBA to Prevent the CSS Opacity Inheritance from Parent to Child Elements

This article is a follow up of another article of mine dealing with the same problem which was written two years earlier. Now, in the light of the increased support for CSS3 the solution I will offer is already fully supported by all major browsers. The new solution deals with RGBA CSS3 backgrounds for Mozilla FireFox, Google Chrome, Opera and Apple Safari and the Microsoft-proprietary DXImage gradient filters for Internet Explorer and may give you some new design ideas. Make sure you check the test page which I have created for this article.

1. Create an empty <div class=”outer”>…</div>, and assign the following CSS to it:

.outer
{
   position: absolute;
   top: 24px;
   left: 24px;
   border: solid 1px #000;
   padding: 24px;
   background: rgba(64, 64, 64, 0.5); /* R, G, B, A */
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040); /* AA, RR, GG, BB */
}

The RGBA background property requires the setting of four values for red (0-255), green (0-255), blue (0-255) and alpha transparency (0-1). Currently it is fully supported by FireFox, Opera, Chrome and Safari. Internet Explorer 9 is planned to support it. As a fallback for older versions of these browsers you may specify:

background: rgb(64, 64, 64);

… Before the rgba property, but keep in mind that Internet Explorer actually supports the RGB module and you will need to remove the background for that browser before or after the filter roperty by targetting all of its versions with the \9 hack:

background: none\9;

Now, let’s add support for RGBA for Internet Explorer 5.5-9. We are going to use the vendor-specific CSS extension gradient filter:

filter: progid:DXImageTransform.Microsoft.gradient();

It’s startColorstr and endColorstr properties allow the setting of both alpha channel and RGB color in hex format:

startColorstr=#AARRGGBB, endColorstr=#AARRGGBB

… Where the permitted values range from 00 to ff. In order to create a solid background we will use identical values for both the start- and end color strings:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f404040, endColorstr=#7f404040);

… Where 7f represents 127, i.e. 50% opacity, and 404040 is the background color of the element (whose RGB representation is 64, 64, 64 as in background: rgba(64, 64, 64, 0.5)).

2. In the <div class=”outer”>…</div> nest a new <div class=”inner”>Lorem ipsum dolor sit amet.</div> and associate it with the following CSS, for example:

.inner
  {
   padding: 12px;
   width: 120px;
   background: #fff;
   border: solid 1px #404040;
  }

Hit F5 to reload the page and you will see that the opacity from div.outer is not inherited by div.inner. Cool, isn’t it? Here’s a link to the online demo. In case you want to keep the file, here’s the download link as well. Keep in mind that the absolute position I have set on the demo page is for display purpose only – to prove the semi-transparency of the div.outer.

Find more experiments here.

About these ads