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