css opacity 屬性與圖片透明度的微妙關系
在網頁設計中，使用 css 控制元素透明度，特別是 opacity 屬性，非常常見。然而，在復雜的布局中，opacity 的作用機制可能會產生一些意想不到的結果。本文將通過一個案例分析 opacity 屬性對子元素圖片的影響，并提供有效的解決方案。
問題場景： 一個名為 wrapper 的父級 DIV 包含三個子級 DIV：left、right 和 container。container 中包含多張圖片。left 和 right 使用絕對定位，與 container 重疊。目標是通過設置 left 的 opacity 屬性，使其與之重疊的圖片也具有相同的透明度。然而，實際效果是圖片透明度不受影響。
問題根源： 問題的關鍵在于元素的層疊順序（z-index）和背景色。如果 left 元素的 z-index 值低于 container，它將被圖片覆蓋，opacity 屬性自然無法影響到圖片。即使 z-index 值較高，如果 left 元素沒有設置背景色，它的透明度也不會影響到其下方的元素。opacity 屬性影響的是元素自身及其后代元素的顏色和背景色，而非它所覆蓋的元素。
解決方案： 要使 left 元素的透明度影響到其下方的圖片，需要同時滿足以下兩個條件：
-
調整層疊順序： 設置 left 元素的 z-index 屬性，使其值大于 container 元素，確保 left 元素位于圖片之上。
-
設置背景色： 為 left 元素設置一個背景色（即使是透明的背景色，例如 rgba(0,0,0,0)）。這將使 left 元素占據其空間，從而使 opacity 屬性能夠影響到其下方的圖片。
通過以上調整，left 元素的 opacity 屬性才能有效地影響到與其重疊的圖片透明度。 記住，opacity 影響的是元素自身的顏色和背景色，只有當元素占據了目標圖片的區域，并且位于圖片之上時，才能實現預期的透明效果。
