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 −