CSS Opacity in Firefox, Safari, Chrome, Opera

CSS Web Development Front 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>