- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
CSS Opacity in Firefox, Safari, Chrome, Opera
To set opacity to work in all modern web browsers like Firefox, Google Chrome, Opera, etc., use the opacity property and set under CSS class −
transparent{
opacity: 0.3;
}Following is the code to work with opacity in modern browsers −
Example
<!DOCTYPE html>
<html>
<head>
<style>
body{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
img {
width:270px;
height:200px;
}
.transparent{
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Opacity example</h1>
<img src="https://i.picsum.photos/id/505/800/800.jpg" >
<img class="transparent" src="https://i.picsum.photos/id/505/800/800.jpg" >
</body>
</html>Output
The above code will produce the following output −
Updated on 07-May-2020 11:22:13
- Related Questions & Answers
- How to enable JavaScript in Chrome, Firefox, and Safari?
- CSS Opacity / Transparency
- How to Delete Bookmarks in your Browser (Firefox, Chrome)
- Perform Animation on CSS opacity
- Setting Cross Browser Opacity using CSS
- CSS Opacity that Works in All Browsers
- Which is the best browser to use: Chrome, Explorer, or Firefox?
- How to secretly copy to clipboard JavaScript function in Chrome and Firefox?
- Usage of -moz-opacity property with CSS
- Set the opacity of an image with CSS
- How to enable JavaScript in Opera?
- How to disable JavaScript in Opera?
- Set the opacity for the background color with CSS
- How to verify an XPath expression in Chrome Developers tool or Firefox's Firebug?
- CSS3 Opacity property
Advertisements