欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS中 opacity的設置影響了index(層數(shù))的改變的問題總結(推薦)

  發(fā)布時間:2017-08-17 10:17:22   作者:小前端學習   我要評論
這篇文章主要介紹了CSS中 opacity的設置影響了index(層數(shù))的改變的問題,通過各種情況出現(xiàn)的問題進行了總結并附上了代碼,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。

在使用 opacity 屬性來實現(xiàn)頁面整體透明的時候,發(fā)現(xiàn)了一個問題。如果兩個層發(fā)生了重疊,使用了 opacity 屬性并且屬性值小于1的層,會覆蓋掉后面的層。于是動手做了個實驗,來驗證 opacity 的層次。

網(wǎng)頁中的層疊規(guī)律是這樣的:如果兩個層都沒有定義 position 屬性為 absolute 或者 relative 屬性,哪個層的HTML代碼放在后面,哪個層就顯示在上面。如果指定了 position 屬性,并且設置了 z-index 屬性,誰的值大,誰就在上面。

Opacity 屬性引發(fā)的層疊問題

而對于沒有激活 z-index 的普通層來說,如果那個層使用了屬性值小于1的 opacity 屬性,哪個層就會顯示在上面。我們做一個Demo。代碼如下:

<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>
        <div id="a"></div>
        <div id="b"></div>
        <div id="c"></div>
</body>
</html>

保存為 html 文件打開之后,可以看到正常的次序

正常的層疊

這時候,我們?yōu)?#a 加上屬性 opacity:0.9 神奇的事情發(fā)生了,它覆蓋了另外兩個層:

加上小于1的 opacity 之后的層疊

只有當為另一個層(例如:#c)也設置一個小于1的opacity值(例如:0.8)之后,后面的 #c 才能安裝正常的規(guī)則覆蓋在 #a 上面。

同時為另一個層賦值 opacity

這樣,增加了小于1的 opacity 屬性的層,升高了一個層次。至于里面的科學原理,我沒有想明白,或許也可能是一個小BUG。但是有時候這種情況是我們不希望發(fā)生的。

通過定義 position 的屬性來解決問題

那么如何來解決這個問題呢?前面也說過了,正常的情況下,指定了 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 屬性之后的層疊效果

也就是說,對層使用 position 屬性的 relative 之后,可以使其層次和 opacity 相同,這樣之后,按照正常的排序進行層疊顯示(在后面的實驗中,我對 absolute 屬性值也做了測試,結果和 relative 屬性值表現(xiàn)的相同)。當我們?nèi)∠?#c 的 opacity 屬性之后,我們可以看到,#c 被排在了最下面。

對底層取消 opacity 屬性之后的效果

還沒有完,之前只是對 #b 激活了 position:relative 屬性,還沒有使用 z-index。我們對 #b 進行了 z-index 的設置(例如:100),很顯然的,#b 成為了最頂層。

對中間層設置 z-index 的效果

層疊問題總結

使用了 position 屬性值為 absolute、relative 的層,將會比普通層更高層次。使用了小于1的 opacity 屬性的層,也比普通層更高層次并且和指定 position 的層同層,但是不支持 z-index 屬性,所以指定 position 的層,可以使用 z-index 屬性,來覆蓋帶有小于1的 opacity 屬性的層。”

以上就是這篇文章的全部內(nèi)容了,希望本文的內(nèi)容對大家的學習或者工作能帶來一定的幫助~如果有疑問大家可以留言交流,謝謝大家對腳本之家的支持!

相關文章

最新評論