Transparent Background Color in CSS
Background components can be seen from another top element of the page thanks to CSS’s transparent color. background-color attributes can be used to make transparent colors.
In CSS, no property called background-opacity is used to change the opacity or transparency of an element’s background without impacting other components such as typefaces. If you try to achieve this with the CSS opacity property, it will also modify the opacity of all the other components.
We will show you how to change transparent background color in CSS with some examples.
Use RGBA to Set Background Color and Transparency in CSS
You can utilize the RGBA color, which incorporates alpha transparency as part of the color value introduced in CSS 3. As seen in the following example, the RGBA color can be used to change the color of the backdrop and its transparency.
Code Example:
<html lang="en">
<head>
<meta charset="utf-8">
<style>
body {
background-image: url("/img/DelftStack/logo.png");
}
p{
padding: 20px;
background: rgba(0, 0, 0, 0.5);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the content.</p>
</body>
</html>
Create Transparent Background Color in CSS
To create a transparent background color, use the CSS RGBA() color code. The effect is useful to provide appearance and feel to the element if you want to make the text background visible to visitors to display the back picture.
Code Example:
<html lang="en">
<head>
<title>CSS Make Background Color Transparent Using RGBA in CSS</title>
<style>
.main-div{
background-image: url("/img/DelftStack/logo.png");
background-attachment: scroll;
padding: 20px;
}
.transparent-bg{
background: rgba(255, 165, 0, 0.73);
padding: 20px;
color: #fff;
text-align: center;
font-size: 26px;
}
</style>
</head>
<body>
<h2>Transparent backgorund color using RGBA in CSS</h2>
<div class="main-div">
<div class="transparent-bg">
Transparent Background
</div>
</div>
</body>
</html>