How to Create Overlays with Transparent Backgrounds in HTML/CSS?

Creating Overlays with Transparent Backgrounds in HTML/CSS

You aim to create an overlay effect where a popup box appears on top of the background content, dimming its appearance. However, applying opacity to the container also affects the popup box.

Solution

To achieve your desired effect, utilize opacity in conjunction with background color. In the CSS for the container:

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

• background-color sets the transparent color for the container.
• rgba() takes the format rgba(r, g, b, a), where r, g, b are red, green, and blue values, and a is the opacity (0 being fully transparent).

Now, for the popup box:

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

This approach allows you to dim the background while maintaining the visibility of the popup box, creating the desired overlay effect.

The above is the detailed content of How to Create Overlays with Transparent Backgrounds in HTML/CSS?. For more information, please follow other related articles on the PHP Chinese website!