如何在CSS中正確設置背景圖片的透明度？

css背景圖片透明度：巧妙運用偽元素

在CSS中，直接設置背景圖片透明度并非易事。background-color: rgba()只能控制背景顏色的透明度，而非圖片本身。 本文將演示如何利用CSS偽元素，優雅地解決這個問題。

讓我們先看看一個常見的誤區：

<div style="background-image: url('image.jpg');">文字要清晰可見</div>

許多開發者嘗試使用background-color: rgba(255, 255, 255, 0.5);來設置透明度，但效果不佳。這是因為rgba()作用于背景顏色，而非圖片。

正確的方案是使用偽元素創建覆蓋層：

立即學習“前端免費學習筆記（深入）”；

首先，html結構：

<div class="container"></div>

然后，CSS樣式：

.container {   position: relative; /* 關鍵：使偽元素定位生效 */ }  .container::before {   content: "";   position: absolute;   top: 0;   left: 0;   right: 0;   bottom: 0;   background-image: url('image.jpg');   opacity: 0.6; /* 設置透明度 */ }

通過::before偽元素，我們創建了一個與.container大小相同的絕對定位層，并設置其背景圖片和透明度。這樣，背景圖片的透明度就得到了完美的控制，而不會影響到容器內的其他內容。 記住，.container的position: relative;屬性是實現此效果的關鍵。