在 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中文網其他相關文章！