How to Maintain Child Element Opacity When Setting Container Opacity in HTML/CSS?

Maintaining Child Element Opacity in HTML/CSS

Your goal is to create a popup box that appears on top of the page, with the background content faded to highlight it. However, you've encountered an issue where setting the container's opacity to 0.3 results in both divs becoming translucent.

Solution: Utilizing Background Color with Opacity

To achieve the desired effect, employ opacity in conjunction with background color. Consider the following code:

<code class="css">#container {
    border: solid gold 1px;   
    width: 400px;
    height: 200px;
    background:rgba(56,255,255,0.1);
}

#box {
    border: solid silver 1px;
    margin: 10px;
    width: 300px;
    height: 100px;
    background:rgba(205,206,255,0.1);
}
</code>

In this code, a slightly different approach is taken:

• The #container element is set to have a gold border and a semi-transparent background with a specified opacity.
• The #box element, which represents the popup box, is given a silver border and a semi-transparent background with a different specified opacity.

By using background color with opacity, you can control the transparency of the container while maintaining the opacity of the child element. This allows the popup box to stand out against the faded background.

The above is the detailed content of How to Maintain Child Element Opacity When Setting Container Opacity in HTML/CSS?. For more information, please follow other related articles on the PHP Chinese website!