如何使用 CSS 建立透明背景圖片？

疊加透明圖像作為背景

在網頁設計中，添加圖像作為背景可以增強美感。然而，有時影像可能太亮或需要調整透明度。您可以在單一 CSS 屬性中組合背景圖片和不透明度嗎？

儘管參考文獻分別解釋了影像透明度和背景影像設置，但可以將它們組合起來創建透明背景影像。

請考慮以下範例：

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

此程式碼將指定 URL 處的圖片設定為 ID 為「main」的元素的背景。但是，這不允許調整不透明度。

要實現透明背景圖像，請使用以下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;
}

在此程式碼中：

1. position:relative 新增至父元素（#main ）以允許後面的偽元素絕對定位。
2. A建立偽元素 (#main:after) 來覆寫背景影像。
3. content 屬性設定為空字串，以防止任何文字或內容出現在偽元素內。
4. 偽元素被賦予絕對定位（position:absolute），使其能夠覆寫父元素。
5. background-image 屬性設定為與 #main 元素相同的 URL background-image，導致圖片覆蓋父元素。
6. opacity : 0.2 將透明度等級設定為 20%。調整此值會變更影像的不透明度。
7. z-index: -1 確保偽元素位於父元素內容的後方。

使用此方法，您可以設定背景圖像並控制其不透明度，使您能夠使用透明圖像創建具有視覺吸引力的設計，而不會壓倒內容。

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