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

 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 −


Advertisements