透過CSS 操縱背景影像不透明度
與更改背景顏色的不透明度相比，會出現有關調整背景影像不透明度的疑問。雖然可以選擇保存具有不同透明度等級的影像，但動態 Alpha 值控制是可取的。
為此，一個簡單的方法涉及嵌套兩個 DIV 元素：
<div>
雖然功能強大，但此方法很麻煩並且會破壞更複雜的佈局。
CSS 產生內容
另一個解決方案在於CSS產生的內容，讓您可以直接在容器元素上設定背景影像：
.container{
position: relative;
z-index:1;
overflow:hidden;
}
.container:before{
z-index:-1;
position:absolute;
left:0;
top:0;
content: url('path/to/image.ext');
opacity:0.4;
}此方法可以實現背景影像不透明度控制。
動態不透明度操縱
但是，它無法動態修改生成內容的不透明度。
要規避此限制，請考慮使用類別和CSS 事件：
.container:hover:before{
opacity:1;
}CSS 過渡
CSS 過渡影像可用於動態設定不透明度的動畫：
-webkit-transition: opacity 1s linear; -o-transition: opacity 1s linear; -moz-transition: opacity 1s linear; transition: opacity 1s linear;
以上是如何使用 CSS 控制背景圖片的不透明度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
