1. Computing

Discuss in my forum

CSS Transparency in Nearly All Browsers

CSS Opacity Properties that Work Across Most Browsers

By

Making things transparent with your CSS can be frustrating, because the CSS3 opacity property isn't supported by all the browsers. But if you use some browser extensions along with the opacity property, you can make things transparent in nearly every browser ever.

Internet Explorer

The first thing you need to remember to get IE to make things transparent is that the element needs to have a layout. In other words, the hasLayout DOM property must be set. There are five HTML elements that always have layout:

So, if you want to set transparency on an element other than one of these five, you need to set the hasLayout property some other way. There are several CSS properties that when set on an element, cause the element to have layout as well:

The easiest to apply tend to be setting the width to 100% or the zoom to 1. Note that in IE 6 and up in strict DOCTYPE conformance mode setting the width or height will not work to add layout to inline elements. So, if you're trying to add transparency to an inline element, you should set the zoom or use one of the other style properties to add layout.

In IE 8 and 9, there is support for the browser extension -ms-filter and you can use this to add alpha transparency. The following sets the opacity to 50%:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

The -ms-filter property is more valid, but since it only works in IE 8 and 9, most people use the easier to write filter: alpha(opacity=50); instead. You can use them both, but make sure that the -ms-filter line comes first in your CSS:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);

Firefox

Firefox before version 1 requires that you use the Firefox browser extension -moz-opacity. So to set the transparency in Firefox 0.8 and lower to 50% you write:

-moz-opacity: 0.5;

Safari

Before Safari switched to Webkit, you needed to use the browser extension -khtml-opacity. So to set the transparency in Safari 1 and lower to 50% you write:

-khtml-opacity: 0.5;

Modern Browsers Use the opacity Property

In this case, modern browsers means Android 2.2+, Chrome 1+, Firefox 0.9+, Internet Explorer 9+, iOS 3+ Opera 9+, and Safari 2+. To set the transparency to 50% in these browsers you write:

opacity: 0.5;

All the CSS Together

So, to set something transparent in nearly any browser, you write the following CSS class, and add class="transparent" to the element you want transparent. This code makes an element 50% transparent:

.transparent {
  zoom: 1; /* gives the object layout */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}
  1. About.com
  2. Computing
  3. Web Design / HTML
  4. Cascading Style Sheets
  5. CSS3
  6. CSS3 Tutorials
  7. CSS Transparency in Nearly All Browsers

©2014 About.com. All rights reserved.