How to Change Background Opacity without Affecting Text

In this tutorial, we are going to see how to Change Background Opacity without Affecting Text. The background-opacity property can only be used to change the opacity or transparency of an element’s background without affecting sub-elements. However, if you try to use the opacity property, it will not only modify the opacity of the background but also modify the opacity of all the subitems.

In this case, you can use the RGBA color introduced in CSS3, which includes alpha transparency in the color value. Using RGBA color, you can set the background color as well as its transparency.

CSS Code:

body {
    background-image: url("https://stackhowto.com/background.jpg");
}

p {
    padding: 30px;
    color: #fff;
    font: 18px Georgia;
    background: rgba(0, 0, 0, 0.7);
}

HTML Code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Change Background Opacity without Affecting Text</title>
		<style type="text/css">
			/* Put the CSS Style Here */
		</style>
	</head>
	<body>
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</body>
</html>

Result
Lorem ipsum dolor sit amet, consectetur adipiscing elit.

CSS Code:

HTML Code:

You May Also Like

How to overlay one DIV over another div using CSS

Styling an input type=”file” button with CSS

How to Change Text Color on Hover in CSS

Leave a Reply Cancel reply