How to use Opacity Property In CSS
The opacity property allows you to make an entire element, including its background and content, transparent. Unlike RGBA, which affects only the background color, opacity applies to the entire element.
Example: This example shows the transparent background color using opacity property.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Transparent Background Example</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
}
.transparent-bg {
width: 200px;
height: 200px;
background-color: rgba(108, 236, 23, 0.5);
margin-top: 20px;
border-radius: 10px;
margin-left: 10vw;
}
</style>
</head>
<body>
<div class="container">
<h4>Transparent Background Color
in CSS with Opacity
</h4>
<div class="transparent-bg">
Element with transparent background color.
</div>
</div>
</body>
</html>
Output:
Output
How to Set Transparent Background Color in CSS ?
Creating a simple transparent background involves styling HTML elements using CSS to achieve the desired visual effect. We can use different approaches to achieve this effect including, RGBA color values and the Opacity property.
Below are the approaches to set transparent background color in CSS:
Table of Content
- Using RGBA Color Values
- Using RGBA