In this post, we will learn how to change background color opacity without affecting text using CSS. If we want to change background color opacity of any element without affecting child elements. So how can we do this, we will learn in this post. 


How To Change Background Color Opacity Without Affecting Text Using CSS ?


Change Background Color Opacity Without Affecting Text

To change background color opacity we use RGBA colors. RGBA is introduced in CSS3. In RGBA, A means alpha. This alpha value is used for color transparency. Alpha value can range from 0.1 to 1.0 . In this example below we used rgba(0,0,0,0.5) for background color opacity. 


<!DOCTYPE html>
<html>
<head>
<title>How To Change Background Color Opacity Without Affecting Text Using CSS ?</title>
<style>

div {

background-image: url("https://source.unsplash.com/800x400/?snow");

background-position: center;

padding: 30px;

}

p {

padding: 10px;

background: rgba(0, 0, 0, 0.5);

color: #fff;

}

</style>
</head>
<body>

<div>

<p>This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text. This is example text.</p>

</div>

</body>
</html> code-box



Summary

In this post we learned how to change background color opacity without affecting text using CSS. You try to make it yourself. I hope you make. If you face any problem, then comment and tell us. Keep visiting the blog to read more similar posts.

Post a Comment

Previous Post Next Post