How Can I Control Parent DIV Opacity Without Affecting Child DIV Opacity?

Controlling Opacity in Parent DIV without Impacting Child DIV

In web development, achieving transparency effects while maintaining content clarity can be challenging. One common requirement is to set opacity in a parent DIV without affecting the opacity of its child DIVs.

To accomplish this effect, you can utilize the CSS opacity property within the parent DIV. By setting the opacity to a value between 0 and 1, you regulate the transparency of the background content within the parent DIV.

Example:

In the CSS code below, we set the parent DIV's opacity to 0.5, which allows 50% transparency for the background image:

.parent {
  background-image: url(../images/madu.jpg);
  opacity: 0.5;
}

Preserving Child DIV Color While Using Opacity

To preserve the black color of the child DIV while setting opacity in the parent DIV, utilize the following CSS property within the child DIV:

.child {
  color: black;
  background-color: transparent;
}

By specifying the background color as transparent in the child DIV, the color of its text remains intact, even with the parent DIV's transparency effect.

The above is the detailed content of How Can I Control Parent DIV Opacity Without Affecting Child DIV Opacity?. For more information, please follow other related articles on the PHP Chinese website!