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:

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Opacity Using RGBA Colors</title>
    body {
        background-image: url("images/pattern.jpg");
    p {
        padding: 20px;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        font: 18px Arial, sans-serif;
    <p>Setting background transparency without affecting the text content.</p>

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:

Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties