How to change the opacity of an element's background without affecting the child elements or text content
Topic: HTML / CSSPrev|Next
Answer: Use the CSS RGBA colors
There is no CSS property like "background-opacity" that you can use only for changing the opacity or transparency of an element's background without affecting its child elements. On the other hand if you will try to do this using the CSS opacity property, it will not only change the opacity of the background but also changes the opacity of all the child elements as well.
In such situations you can use the RGBA color introduced in CSS3 that includes alpha transparency as part of the color value. Using RGBA color you can set the color of the background as well as its transparency, as demonstrated in the following example:
Example
Try this code »<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
<style>
body {
background-image: url("images/pattern.jpg");
}
p {
padding: 20px;
background: rgba(0, 0, 0, 0.6);
color: #fff;
font: 18px Arial, sans-serif;
}
</style>
</head>
<body>
<p>Setting background transparency without affecting the text content.</p>
</body>
</html>Alternatively, you can use the transparent PNG images to achieve this effect. Check out the tutorial on CSS opacity to learn more about setting the text in a transparent box.
Related FAQ
Here are some more FAQ related to this topic:
