在 HTML/CSS 中设置容器不透明度时如何保持子元素不透明度？

在 HTML/CSS 中保持子元素不透明度

您的目标是创建一个出现在页面顶部的弹出框，背景内容褪色以突出显示它。但是，您遇到了一个问题，将容器的不透明度设置为 0.3 会导致两个 div 都变成半透明。

解决方案：利用不透明度的背景颜色

要达到所需的效果，请在与背景颜色结合。考虑以下代码：

<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>

在此代码中，采用了稍微不同的方法：

• #container 元素设置为具有金色边框和半透明具有指定不透明度的背景。
• 代表弹出框的 #box 元素被赋予银色边框和具有不同指定不透明度的半透明背景。

通过使用具有不透明度的背景色，可以控制容器的透明度，同时保持子元素的不透明度。这使得弹出框在褪色的背景下脱颖而出。

以上是在 HTML/CSS 中设置容器不透明度时如何保持子元素不透明度？的详细内容。更多信息请关注PHP中文网其他相关文章！