應用不透明度而不影響子元素

Question

我有一個div，有一個背景圖像，並且當它得到了徘徊，在div將給予不透明度0.7

<div> 
    <span>text</span> 
</div> 

其次我有一個跨度，當我徘徊，我用show()覆蓋其默認css display:none。

問題是不透明度也適用於span，所以文字並沒有像我期望的那樣突出。我試圖在懸停事件上設置span爲不透明度1，沒有運氣。

Answer 1

不透明度會影響元素的所有子元素。你可以通過使用兩個平行的div來實現你想要的效果，一個用於不透明背景圖像，另一個用於跨度和content的其餘部分。 absolute定位bg-img將不會影響content的位置，並會出現在此後面。你也想用top，bottom，right，left，width或height

HTML調整bg-img定位和尺寸：

<div> 
    <div class="bg-img"></div> 
    <div class="content"> 
     <span>text</span> 
    </div> 
</div> 

CSS：

.bg-img { 
    position: absolute; 
} 
.bg-img:hover { 
    opacity: 0.7; 
} 

Answer 2

如果圖像背後的背景顏色是已知的，喲你可以將不透明的背景色應用於<span>，以使背景圖像顯得褪色。

http://jsfiddle.net/TxQny/

HTML：

<div class="bg"> 
    <span class="overlay">text</span> 
</div> 

CSS：

.bg { 
    background-color: #e0e0e0; /* You can use an image instead */ 
} 
.overlay { 
    display: block; 
} 
.overlay:hover { 
    background-color: rgba(0, 255, 255, 0.3); 
} 

當然，這裏假設你的關心所有的瀏覽器要支持支持RGBA。