Print this Section

  
  

Image Transparency/Opacity

With CSS you can change the transparency/opacity of images to enhance the look of your page. Currently, Internet Explorer 8 and earlier use a different technique for applying image transparency than Firefox, Chrome, and other Internet browsers. Style properties for the browsers are shown in the table below.

Property: Value Description
opacity x
x can be a value between 0.0 - 1.0.
A lower value makes the element more transparent.
Changes the transparency/opacity of an image.
This property is supported by all major browsers including IE9 and later.
filter:alpha(opacity=x)) x
x can be a value from 0 - 100.
A lower value makes the element more transparent
Changes the transparency/opacity of an image. ** Currently this property is used only by IE8 and earlier versions.

Figure 5-23. Properties and values for image transparency/opacity.

The following example demonstrates how to use the transparency properties in both IE and other browsers

    <body style="background-image:url(stonehenge1.jpg);"
    background-repeat:repeat;font:10pt arial">"


    <div style="width:400px;height: 180px;margin: auto;"
    background-color: #ffffff;border: 1px solid black;
    padding:10px;filter:alpha(opacity=60);opacity:0.6">"  

    <p>
    A background image is specified with the background-image:url(url) 
    property, where the location of the image file is given by its url 
    address. If the image file is stored in the same location as the page, 
    only the file name need be coded. If no other style settings are 
    made pertaining to the background image, it is repeated horizontally 
    and vertically, across and down the container, to fill the background 
    with the image.
    </p>

    </div>

    </body>

A background image is specified with the background-image:url(url) property, where the location of the image file is given by its url address. If the image file is stored in the same location as the page, only the file name need be coded. If no other style settings are made pertaining to the background image, it is repeated horizontally and vertically, across and down the container, to fill the background with the image.

Figure 5-24. Transparency/Opacity example


TOP | NEXT: Chapter 6 - Applying Special Styles