Syntax error Setting Cross Browser Opacity using CSS

Setting Cross Browser Opacity using CSS

The property opacity is the modern solution and works for Firefox, Safari, opera, and every version of chrome. The -moz-opacity property is the opacity property for Firefox while the -khtml-opacity property is for safari. The filter property is to give opacity like effect. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers.

Set the images

We will check the cross-browser opacity for the images. The second image above will get opaque on all browsers −

<img src="https://www.tutorialspoint.com/python/images/python.jpg" />
<img class="transparent" src="https://www.tutorialspoint.com/python/images/python.jpg" />

Opacity for the 2nd image

The opacity for the second image is set using the opacity property −

.transparent {
   filter: alpha(opacity=30);
   -moz-opacity: 0.3;
   -khtml-opacity: 0.3;
   opacity: 0.3;
}

Cross browser opacity

The -moz-opacity property is the opacity property for Firefox −

-moz-opacity: 0.3;

The -khtml-opacity property is for safari versions −

-khtml-opacity: 0.3;

Example

The following is code for having cross browser opacity using CSS −

<!DOCTYPE html>
<html>
<head>
   <style>
      body {
         font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }
      img {
         width: 270px;
         height: 200px;
      }
      .transparent {
         filter: alpha(opacity=30);
         -moz-opacity: 0.3;
         -khtml-opacity: 0.3;
         opacity: 0.3;
      }
   </style>
</head>
<body>
   <h1>Cross browser opacity</h1>
   <img src="https://www.tutorialspoint.com/python/images/python.jpg" />
   <img class="transparent" src="https://www.tutorialspoint.com/python/images/python.jpg" />
   <h3>The second image above will get opaque on all browsers</h3>
</body>
</html>
Updated on: 2023-12-27T16:08:34+05:30

400 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements