Cheap VPS & Xen Server


Residential Proxy Network - Hourly & Monthly Packages

CSS Opacity


The CSS opacity property is used to specify the transparency of an element. In simple word, you can say that it specifies the clarity of the image.

In technical terms, Opacity is defined as degree in which light is allowed to travel through an object.


How to apply CSS opacity setting

Opacity setting is applied uniformly across the entire object and the opacity value is defined in term of digital value less than 1. The lesser opacity value displays the greater opacity. Opacity is not inherited.


CSS Opacity Example: transparent image

Let’s see a simple CSS opacity example of image transparency.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. img.trans {
  6.     opacity: 0.4;
  7.     filter: alpha(opacity=40); /* For IE8 and earlier */
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>Normal Image</p>
  13. <img src=“rose.jpg” alt=“normal rose”>
  14. <p>Transparent Image</p>
  15. <img class=“trans” src=“rose.jpg” alt=“transparent rose”>
  16. </body>
  17. </html>

Output:

Normal Image

rose

Transparent Image

rose

Note 1: Chrome, Firefox, Opera, Safari, and IE9 use the opacity property for transparency. The opacity value ranges from 0.1 to 1.0. Lower value produces the greater opacity.

Note 2: The older versions of IE use filter: alpha(opacity=x). Here x value varies from 0 to 100. Lower value produces the greater opacity.

Comments

comments