如何在容器中實現選擇性不透明度而不影響子元素？

在 HTML/CSS 中實現選擇性不透明度

在網頁上創建視覺元素時，控制不透明度至關重要。然而，在不影響子元素的情況下實現不透明度可能具有挑戰性。本問題探討了一種在不影響容器內容可見性的情況下將不透明度應用於容器的技術。

所需的效果是位於網頁內容上方的彈出框，透過降低其不透明度，背景內容部分可見。提問者嘗試在容器上使用不透明度，但不透明度也影響了子元素，導致兩者的不透明度降低。

要解決此問題，您可以採用不透明度和背景顏色的組合。將容器的背景顏色設定為具有不透明度組件的 rgba 值（例如 rgba(56,255,255,0.1)），您可以降低其不透明度，同時保留子元素的可見度。這允許您創建具有部分不透明背景的彈出框的預期效果。

<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);
}

<div id="container">
    containter text
    <div id="box">
        box text
    </div>
</div>
</code>

以上是如何在容器中實現選擇性不透明度而不影響子元素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！