How Can I Make a Div's Background Opaque Without Affecting its Text?

CSS Opacity for Background Color Only, But Not Text

Problem:

Is it possible to set the opacity property exclusively for the background of a div, without affecting the text within it?

Initial Attempt:

The following code was attempted:

background: #CCC;
opacity: 0.6;

However, this method failed to modify the opacity of the background.

Solution:

To create a transparent background while leaving the text unaffected, consider utilizing the rgba() function:

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

rgba() Function Syntax:

• R, G, B: Integers or percentages representing red, green, and blue values.
• A: Alpha value between 0 and 1 or a percentage, where 1 represents full opacity.

Example:

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

This code creates a background that is 40% opaque with a green color.

Browser Compatibility:

As of 2018, virtually every modern browser supports the rgba() syntax.

The above is the detailed content of How Can I Make a Div's Background Opaque Without Affecting its Text?. For more information, please follow other related articles on the PHP Chinese website!