How Can I Control Background Color Opacity in CSS Without Affecting Text Opacity?

Controlling Background Color Opacity in CSS

In CSS, assigning the opacity property to a div will affect both the background and the text within it. However, it is possible to modify the background color's opacity while maintaining the text's opacity.

Using the rgba() Function

The rgba() function can be used to specify the background color and its alpha channel, which controls the opacity. The syntax is as follows:

background: rgba(R, G, B, A);

• R, G, and B represent the red, green, and blue values for the color (either integers or percentages).
• A represents the alpha channel value, which ranges from 0 (transparent) to 1 (opaque).

For example:

background: rgba(51, 170, 51, 0.6);

This code sets the background color to a translucent green with a 60% opacity, while the text within the div will remain fully opaque.

Browser Support

As of 2018, the rgba() syntax is widely supported in all major web browsers.

The above is the detailed content of How Can I Control Background Color Opacity in CSS Without Affecting Text Opacity?. For more information, please follow other related articles on the PHP Chinese website!