How Can I Apply Opacity to a Parent Element Without Affecting its Child?

Opacity in Parent Element without Affecting Child

The original question sought a solution to apply opacity to a parent element without affecting the opacity of its child element. This can be challenging because by default, opacity applied to the parent will also affect any child elements.

However, a commonly used technique involves utilizing the rgba() function in CSS, which allows you to define a color with its opacity value. To achieve the desired result, you can set the background color of the parent element using rgba() with a transparent opacity value. For example:

.parent {
  background-color: rgba(0, 0, 0, 0.5);
}

In this example, the parent element will have a 50% transparent black background, while the child element will not be affected and will maintain its original color, as demonstrated below:

<div class="parent">
  <div class="child">Hello, I am a child</div>
</div>

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