如何在 HTML/CSS 中建立透明背景的疊加層？

在HTML/CSS 中建立具有透明背景的疊加

您的目標是建立一個疊加效果，其中彈出框出現在背景頂部內容，使其外觀變暗。但是，對容器套用不透明度也會影響彈出框。

解決方案

要實現您想要的效果，請將不透明度與背景顏色結合使用。在容器的 CSS 中：

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

• background-color 設定容器的透明顏色。
• rgba() 採用格式 rgba(r, g, b, a)，其中 r、g、b 是紅色、綠色和藍色值，a 是不透明度（0 表示完全透明）。

現在，對於彈出框：

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

這種方法允許您調暗背景，同時保持彈出框的可見性，從而創建所需的疊加效果。

以上是如何在 HTML/CSS 中建立透明背景的疊加層？的詳細內容。更多資訊請關注PHP中文網其他相關文章！