
- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursors
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS Advanced
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Media Types
- CSS - Paged Media
- CSS - Aural Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS3 - Rounded Corner
- CSS3 - Border Images
- CSS3 - Multi Background
- CSS3 - Color
- CSS3 - Gradients
- CSS3 - Shadow
- CSS3 - Text
- CSS3 - Web font
- CSS3 - 2d transform
- CSS3 - 3d transform
- CSS3 - Animation
- CSS3 - Multi columns
- CSS3 - User Interface
- CSS3 - Box Sizing
- CSS Responsive
- CSS - Responsive Web Design
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
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 −
- Related Articles
- How to enable JavaScript in Chrome, Firefox, and Safari?
- How to Delete Bookmarks in your Browser (Firefox, Chrome)
- CSS Opacity / Transparency
- How to secretly copy to clipboard JavaScript function in Chrome and Firefox?
- Which is the best browser to use: Chrome, Explorer, or Firefox?
- Targeting only Firefox with CSS
- Perform Animation on CSS opacity
- CSS Opacity that Works in All Browsers
- Setting Cross Browser Opacity using CSS
- How to verify an XPath expression in Chrome Developers tool or Firefox's Firebug?
- Usage of -moz-opacity property with CSS
- How to set color opacity with RGBA in CSS?
- Chrome input type=“number” CSS styling
- Set the opacity of an image with CSS
- How to enable JavaScript in Opera?

Advertisements