CSS Opacity that Works in All Browsers
https://www.tutorialspoint.com/css-opacity-that-works-in-all-browsers
-
13-09-2020 - |
Question
CSS Opacity that Works in All Browsers
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 −
Advertisements
Not affiliated with Tutorialspoint