div的不透明度會產生意想不到的結果並將圖像與圖像混合

Question

有人可以解釋爲什麼下面片段中的第二個&第三個div似乎與圖像混合？爲了清楚起見，這裏的問題是關於爲什麼內容元素的不透明度似乎影響圖層順序。

該圖像是一個動畫gif沒有透明度。在上面的div裏，一切看起來都像預期的那樣。該圖像以白色背景旋轉，阻止其下方div的文本內容。

在下面的兩個div我已經下降的不透明性和在某種程度上這將創建的文本效果疊加在圖像。這在第三個div中進一步說明，我在包裝上設置了背景顏色。整個事情只是讓我感到困惑和意外。

div.wrapper { 
 
    position: relative; 
 
    padding: 15px; 
 
    border: 1px solid #ddd; 
 
} 
 
img.loader { 
 
    position: absolute; 
 
    left: calc(50% - 32px); 
 
    top: calc(50% - 32px); 
 
} 
 
div.content-b, 
 
div.content-c { 
 
    opacity: .5; 
 
} 
 
div.wrapper-c { 
 
    background-color: #bbb; 
 
}

<div class="wrapper"> 
 
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" /> 
 
    <div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
 
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora 
 
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate 
 
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> 
 
</div> 
 
<div class="wrapper"> 
 
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" /> 
 
    <div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
 
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora 
 
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate 
 
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> 
 
</div> 
 
<div class="wrapper wrapper-c"> 
 
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" /> 
 
    <div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
 
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora 
 
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate 
 
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> 
 
</div>

Answer 1

沿着z軸堆疊規則說：

1. 同級的順序 - 基於哪個來首先考慮

2. 甲定位同級元素堆疊在static元素上 - 所以img理想情況下應該在div之上。

3. 其它性能等position影響堆疊環境包括opacity，transform。

參見這些摘錄MDN: stacking context

形成有堆疊環境，文檔中的任何地方，通過任何元件 其是

• 根元素（HTML），

• 定位（絕對或相對）z-index值其他r除「自動」，

• 具有比「自動」以外的z索引值的柔性物品，即父元素顯示：柔性|直列彎曲，

• 元件用的不透明度值以下比1。（參見不透明度說明書），

• 元件與變換不是「無」等的值，

• 元件以比「正常」以外的混合 - 混合模式值，

• 元件具有比「無」之外的過濾器值，

• 元件具有比「無」之外的透視值，

• 元件用隔離設置爲「隔離」，

• 位置：固定

• 直接指定上述意志改變任何屬性，即使你不指定這些屬性值（見此帖）

• 元素與-webkit-overflow-滾動設置爲 「觸摸」

可以通過將修復它的div以下 - 見下面的演示：

div.wrapper { 
 
    position: relative; 
 
    padding: 15px; 
 
    border: 1px solid #ddd; 
 
} 
 
img.loader { 
 
    position: absolute; 
 
    left: calc(50% - 32px); 
 
    top: calc(50% - 32px); 
 
} 
 
div.content-b, 
 
div.content-c { 
 
    opacity: .5; 
 
} 
 
div.wrapper-c { 
 
    background-color: #bbb; 
 
}

<div class="wrapper"> 
 
    
 
    <div class="content-a">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
 
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora 
 
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate 
 
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> 
 
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" /> 
 
</div> 
 
<div class="wrapper"> 
 

 
    <div class="content-b">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
 
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora 
 
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate 
 
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> 
 
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" /> 
 
</div> 
 
<div class="wrapper wrapper-c"> 
 

 
    <div class="content-c">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
 
    sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora 
 
    incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate 
 
    velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div> 
 
    <img class="loader" src="//zuma-design.com/shared/so/loading-large.gif" /> 
 
</div>

Answer 2

你應該給予較高的z-index到的img然後坐在上面所有。

z-index：9999;

如果不透明度小於1的元素沒有被定位，實現必須漆它創建的層，它的父堆疊上下文中，在如果它與「Z A定位元件，將使用相同的堆疊順序-index：0'和'不透明度：1'。