Marusya's School Notes

Image Opacity

Creating transparent images with CSS is easy with the CSS opacity property, which is a part of the CSS3 recommendation.

HTML file:	Displayed by browser:
<style> img { opacity: 0.4; filter: alpha(opacity=40); /* For IE8 and earlier */ } </style> <body> <p>Here, we have a regular image:</p> <img src="../html_beg/images/klematis_small.jpg" alt="Klematis" width="107" height="90"> <hr /> <p>A transparency effect is applied to that image, with CSS coding:</p> <img class="opa" src="../html_beg/images/klematis_small.jpg" alt="Klematis" width="107" height="90"> </body>	Here, we have a regular image: A transparency effect is applied to that image, with CSS coding:

HTML file:

Displayed by browser:

<body>
<p>Here, we have a regular image:</p>
<img src="../html_beg/images/klematis_small.jpg" alt="Klematis" width="107" height="90">
<hr />
<p>A transparency effect is applied to that image, with CSS coding:</p>
<img class="opa" src="../html_beg/images/klematis_small.jpg" alt="Klematis" width="107" height="90">
</body>

Here, we have a regular image:

A transparency effect is applied to that image, with CSS coding:

The opacity property can take a value from 0.0 - 1.0. The lower value, the more transparent. Note:IE8 and earlier use filter:alpha(opacity=x). The x can take a value from 0 - 100. A lower value makes the element more transparent.