這篇文章主要介紹了解決CSS3的opacity屬性帶來的層疊順序問題的方法,主要針對opacity的屬性值小於1的層會覆蓋在其他層之上的問題,需要的朋友可以參考下
在最近的一個作品中,在使用opacity 屬性來實現頁面整體透明的時候,發現了一個問題。如果兩個層發生了重疊,使用了 opacity 屬性且屬性值小於1的層,會覆寫後面的層。於是動手做了個實驗,來驗證 opacity 的層次。
網頁中的層疊法則是這樣的:如果兩個層都沒有定義 position 屬性為absolute 或relative 屬性,哪個層的HTML程式碼放在後面,哪個層就顯示在上面。如果指定了 position 屬性,並且設定了 z-index 屬性,誰的值大,誰就在上面。
發現問題
而對於沒有啟動z-index 的普通層來說,如果那個層使用了屬性值小於1的opacity 屬性,哪個層就會顯示在上面。我們做一個Demo。程式碼如下:
<!DOCTYPE html> <html> <head> <title>带有 opacity 的层叠问题</title> <style> html{padding:40px;} .dd{width:100px;height:100px;} a{background:red;} b{background:blue;margin-left:20px;margin-top:-80px;} c{background:green;margin-left:40px;margin-top:-80px;} </style> </head> <body> <p id=”a”></p> <p id=”b”></p> <p id=”c”></p> </body> </html>
儲存為html 檔案開啟之後,可以看到正常的順序
這時候,我們為# a 加上屬性opacity:0.9 神奇的事情發生了,它覆蓋了另外兩個層
只有當為另一個層(例如:#c)也設定一個小於1的opacity值(例如:0.8)之後,後面的#c 才能安裝正常的規則覆蓋在#a 上面。
這樣,增加了小於1的 opacity 屬性的層,並升高了一個層次。至於裡面的科學原理,我沒有想明白,或許也可能是一個小BUG。但是有時候這種情況是我們不希望發生的。
解決問題
那麼如何來解決這個問題呢?前面也說過了,正常的情況下,指定了 position 並且指定了 z-index 值的層,擁有比普通層更高的層次,那麼指定 opacity 的層和指定了 position 的層相比呢?我們對 #b 加上 position:relative 看看。這時候的樣式程式碼如下:
#a{background:red;opacity:0.9;} b{background:blue;margin-left:20px;margin-top:-80px;position:relative;} c{background:green;margin-left:40px;margin-top:-80px;opacity:0.8;}
已儲存刷新後,看到效果是這樣的:
也就是說,對層使用position 屬性的relative 之後,可以使其層次和opacity 相同,這樣之後,按照正常的排序進行層疊顯示(在後面的實驗中,我對absolute 屬性值也做了測試,結果和relative 屬性值表現的相同)。當我們取消了 #c 的 opacity 屬性之後,我們可以看到,#c 被排在了最下面。
還沒完,之前只是對 #b 啟動了position:relative 屬性,還沒有使用 z-index。我們對 #b 進行了 z-index 的設定(例如:100),很顯然的,#b 成為了最頂層。
結論:
使用了position屬性值為absolute、relative 的層,將會比普通層更高層次。使用了小於1的opacity屬性的層,也比普通層更高層次且和指定position 的層同層,但是不支援z-index 屬性,所以指定position 的層,可以使用z-index 屬性,來覆蓋帶有小於1的opacity 屬性的層。
以上是CSS3的opacity屬性所帶來的層疊順序問題解決方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

文章討論了CSS保證金屬性,特別是“保證金:40px 100px 120px 80px”,其應用程序以及對網頁佈局的影響。

本文討論了CSS邊境屬性,重點是自定義,最佳實踐和響應能力。主要論點:邊境 - 拉迪烏斯(Border-Radius)對響應式設計最有效。

本文討論了CSS中評論的使用,詳細介紹了單線和多行評論語法。它認為註釋可以增強代碼的可讀性,可維護性和協作,但如果無法正確管理,可能會影響網站性能。


熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

SublimeText3 Linux新版
SublimeText3 Linux最新版

SecLists
SecLists是最終安全測試人員的伙伴。它是一個包含各種類型清單的集合,這些清單在安全評估過程中經常使用,而且都在一個地方。 SecLists透過方便地提供安全測試人員可能需要的所有列表,幫助提高安全測試的效率和生產力。清單類型包括使用者名稱、密碼、URL、模糊測試有效載荷、敏感資料模式、Web shell等等。測試人員只需將此儲存庫拉到新的測試機上,他就可以存取所需的每種類型的清單。

SublimeText3漢化版
中文版,非常好用

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具