To change the background opacity of an element without affecting the text, you can use the rgba color value for the background color. rgba stands for red, green, blue, and alpha, and the last value, alpha, is used to set the opacity. A value of 1 is fully opaque, and a value of 0 is fully transparent.

Here’s an example:

<div class="container">
    <p>Some text here</p>
</div>
.container {
    background-color: rgba(0, 0, 0, 0.5); /* black color with 50% opacity */
    color: white; /* text color */
}

This will set the background color of the container to black with an opacity of 50%, while the text color will remain white.

You can also use a semi-transparent color for the background and set the text color to be solid, so the text is more legible.

.container {
    background-color: rgba(255, 255, 255, 0.5); /* white color with 50% opacity */
    color: black; /* text color */
}

This will set the background color of the container to white with an opacity of 50%, while the text color will be black.

It’s also worth noting that the opacity property applies to the entire element and all its child elements, while rgba only applies to the background color of an element, so using rgba will make the text more legible, and it will not affect other child elements.

You can play with different colors, and opacity values as per your requirement and design.

Also Read:

Categorized in:

HTML & CSS

Tagged in:

,