如何在嵌套div中使用不同的CSS不透明度？

Question

前提：我不會使用「位置」絕對/相對/ z-索引等，因爲我正在使用Bootstrap，而使用像素度量的越少越好。 我也看到了一些類似的問題，但我沒有找到一個很好的固溶，既不符合RGBA *也不符合的z-index

我有兩個嵌套的div。

<div id="div1" style="background-image:url('background.png')"> 
    <div id="div2" style="opacity:0;"> 
     Some text 
    </div> 
</div> 

所以：我有設定爲DIV1的背景圖像。在div1內部（正好在它的中心）有div2它不包含文本以外的東西。 在開始時，圖像具有完全不透明度（1.0），並且文本是不可見（不透明度：0）。

懸停我想要的圖像具有不透明度：0.6但div嵌套（文本）必須有透明度：1.0（完全不透明）

我想簡單地將不同的不透明性2 div，但嵌套div繼承不透明度：從div1 0.6。此外，我試圖玩一個不同的背景（包括文字），但這會導致圖形文物，它並不是最佳的。 我也嘗試加入！重要不透明度：X，但沒有任何變化。

有什麼建議嗎？

在此先感謝。

Answer 1

#div1 
{ 

} 
#div2 
{ 
opacity:0.5; 
} 

#div1:hover 
{ 
opacity:0.6; 
position: relative; 
} 
#div:hover > :after 
{ 
opacity: 0.5; 
position: absolute; 
height: ...; 
width: ..; 
} 
#div1:hover > div1 
{ 
position: relative; 
height: ...; 
width: ..; 
opacity:1 
} 

Answer 2

您需要使用兩個圖像（一個透明的，以完全不透明和懸停效果時改變它）

CSS

#div1 { 
    background:img-1.png; 
    text-indent:-9999px; 
    overflow:hidden 
} 
#div1:hover { 
    background:img-2.png 
    text-indent:inherit /*works if you have normal text-indent on your parent element*/ 
}