Setting an Element s Opacity

Setting an Element's Opacity

One of the earliest CSS3 features to be implemented widely is the ability to set the opacity of an element, which lets you transform an element from opaque to transparent and anywhere in-between. However, different browsers implement opacity in different ways.

For example, rather than implement the W3C CSS syntax, Internet Explorer builds on its existing filter functionality, while other W3C-compliant browsers simply add the opacity property (Table 8.4). But because Internet Explorer ignores the other browser's code, you can place both declarations in the rule list for the element in question to control its opacity.

Table 8.4. Opacity Values




FF1, S1.3,O9, CSS2


FF1, S1.3,O9, CSS2

In this example (Figure 8.7), I'm using the same image stack as in Figures 7.7 and 7.8, but I've set different opacities so that the images underneath show through.

Figure 8.7. Object 1 is at 25 percent opacity (0.25), Object 2 is at 50 percent opacity (0.50), Object 3 is at 75 percent opacity (0.75), and object 4 is at 100 percent opacity (1.0).

To set the opacity of an element:



To control opacity of an element displayed in Internet Explorer for Windows, type the filter property name, followed by a colon (:), in the declaration block (Code 8.4).

Code 8.4. Using separate style declarations for Internet Explorer (filter) and CSS3 browsers(opacity), you can set the opacity of elements and be sure they'll appear the way you want them to in most browsers.

[View full width]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " xhtml1-strict.dtd"> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML &amp; Ajax | Setting an Element's Opacity</title> <style type="text/css" media="screen"> img {      margin-bottom: 4px;      display: block; } .dropBox {      padding: 4px;      background-color: #FFFFFF;      border: 2px solid #f00; } #object1 {      filter:progid:DXImageTransform. Microsoft.BasicImage(opacity=0.25);      opacity: 0.25;      position: absolute;      z-index: 3;      top: 285px;      left: 315px; } #object2 {      filter:progid:DXImageTransform. Microsoft.BasicImage(opacity=0.5);      opacity: 0.5;      position: absolute;      z-index: 2;      top: 210px;      left: 210px; } #object3 {      filter:progid:DXImageTransform. Microsoft.BasicImage(opacity=0.75);      opacity: 0.75;      position: absolute;      z-index: 1;      top: 105px;      left: 105px; } #object4 {      filter:progid:DXImageTransform. Microsoft.BasicImage(opacity=1);      opacity: 1.0;      position: absolute;      z-index: 0;      top: 5px;      left: 5; } </style> </head> <body> <div  > <img src="/books/3/292/1/html/2/alice22a.gif" height="220" width="150" alt="Alice in Wonderland" /> Object 1</div> <div  > <img src="/books/3/292/1/html/2/alice15a.gif" height="264" width="200" alt="Alice in Wonderland" /> Object 2</div> <div  > <img src="/books/3/292/1/html/2/alice28a.gif" height="336" width="250" alt="Alice in Wonderland" /> Object 3</div> <div  > <img src="/books/3/292/1/html/2/alice30a.gif" height="408" width="300" alt="Alice in Wonderland" /> Object 4</div> </body></html>


progid:DXImageTransform.Microsoft. BasicImage(opacity=0.75);

Add the progid code to define the filter and value being used. You do not want to change this code, except for the alpha value after opacity, which can range between 0.0 (completely transparent) and 1.0 (completely opaque). End the declaration with a semicolon (;).



To control the opacity of an element displayed in Mozilla-based browsers, add the opacity property name, followed by a colon (:), to the declaration block.



Enter an alpha value for the opacity of the element, which can range between 0.0 (completely transparent) and 1.0 (completely opaque).

You could also useinherit, which will set the element's opacity to be the same as its parent. So if the parent has an opacity of 0.75, inherit will cause the child element to reduce its opacity 75 percent in addition to the 75 percent already set for the parent.


  • Opacity is applied to the entire element and to all of its children, with no way to override it in child elements. However, you can set the opacity of two sibling elements independently and then position one on top of the other.

  • Opacity changes will not work in Internet Explorer for Macintosh, in earlier versions of Safari, or in earlier versions of Opera.

CSS, DHTML and Ajax. Visual QuickStart Guide
CSS, DHTML, and Ajax, Fourth Edition
ISBN: 032144325X
EAN: 2147483647
Year: 2006
Pages: 230

Similar book on Amazon © 2008-2017.
If you may any questions please contact us: