CSS Transparency Using RGBA

CSSWeb DevelopmentFront End Technology

Use the RGBA() values for CSS transparency. Set the alpha channel parameter to specify the opacity for color.

Following is the code for implementing CSS transparency using RGBA −

Example

 Live Demo

<!DOCTYPE html>
<html>
<head>
<style>
body {
   font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
div {
   width: 200px;
   height: 200px;
   background-color: rgb(0, 0, 255);
   color: white;
   display: inline-block;
}
.transparent {
   background-color: rgba(0, 0, 255, 0.582);
}
</style>
</head>
<body>
<h1>Transparency using RGBA example</h1>
<div class="transparent">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic, accusantium.
</div>
<div>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, nisi!
</div>
</body>
</html>

Output

The above code will produce the following output −

raja
Published on 07-May-2020 10:24:36
Advertisements