如何在 CSS 中使用不透明度控制來建立透明背景圖片？

具有不透明度控制的透明背景圖像

在 CSS 中，設定背景圖像和調整其不透明度是單獨的任務。但是，可以將這兩者結合起來以創建透明背景圖像。

設定背景圖片和不透明度

要設定背景圖片，請使用帶有有效圖片 URL 的 background-image 屬性。例如：

#main {
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
}

要指定背景影像的不透明度，請使用 opacity 屬性。值範圍從 0（完全透明）到 1（完全不透明）。

但是，直接將不透明度套用於背景影像屬性只會影響影像，而不影響背景本身。要實現透明背景影像，我們需要一個額外的步驟。

建立透明背景圖層

要在背景影像上建立透明圖層，請使用下列CSS：

#main {
    position: relative;
}
#main:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg);
    width: 100%;
    height: 100%;
    opacity: 0.2;
    z-index: -1;
}

在此CSS 中：

• #main:after 建立一個偽元素，該元素將成為透明圖層。
• 位置：絕對將圖層放置在主元素上。
• 不透明度：0.2 將圖層的不透明度設為 20%。
• z-index：-1 確保圖層位於主元素內容的後方。

透過結合這些 CSS 技術，您可以建立透明具有精確不透明度控制的背景圖片。

以上是如何在 CSS 中使用不透明度控制來建立透明背景圖片？的詳細內容。更多資訊請關注PHP中文網其他相關文章！