The property opacity is the modern solution and works for Firefox 0.9+ , Safari 2, opera 9+, IE 9+ and every version of chrome. The -moz-opacity property is the opacity property for Firefox versions older than 0.9 while the –khtml-opacity property is for safari versions starting with 1. The filter property is for IE browsers from 5 to 9 to give opacity like effect. Using all these values together as a fallback for modern opacity allows us to use opacity in all browsers.
Following is code for having image opacity using CSS that works in all browsers −
Example
<!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>Opacity for all browsers</h1>
<img src="https://i.picsum.photos/id/305/800/800.jpg" />
<img class="transparent" src="https://i.picsum.photos/id/305/800/800.jpg" />
<h3>The second image above will get opaque on all browsers</h3>
</body>
</html>Output
The above code will produce the following output −
