CSS Opacity in Firefox, Safari, Chrome, Opera

CSSWeb DevelopmentFront End Technology

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

 Live Demo

<!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 −

raja
AmitDiwan
Published on 07-May-2020 10:20:18
Previous Page Print Page
Next Page  
Advertisements