How to use RGBA Color Values In CSS
This approach involves using the RGBA color model to set a transparent background. You can adjust the alpha component to control the transparency level.
Example: This example shows the transparent background color using RGBA color values.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Transparent Background Color</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(255, 0, 0, 0.3);
margin-top: 20px;
border-radius: 10px;
margin-left: 10vw;
font-size: 30px;
padding-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<h3>Transparent Background Color
using RGBA Color Values
</h3>
<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