當子元素是鏈接時，我如何處理獨立的父母和孩子的混濁？

Question

我有一個父母<div>和一個孩子<a>。父母的背景圖像設置爲不透明度爲60％，但我希望子鏈接具有100％的不透明度。我以這種方式實現它的原因是，我可以通過懸停將父級的不透明度降至100％，從而消除了懸停圖像的需求。

我明白，孩子們繼承父母的不透明。我嘗試了:after {}技術描述here，但即使適當設置了z-index值，子鏈接仍然位於父元素下方並且不可點擊。

我的問題是無法點擊子鏈接，因爲父子的:after僞元素位於子元素之上。

我的代碼如下：

<div> 
    <a href="#">Load more</a> 
</div> 

div { 
    position: relative; 
    height: 300px; 
} 
div:after { 
    position: absolute; 
    top: 0; 
    left: 0; 
    content: ''; 
    background: url('../img/bg-load-more.png') repeat-x; 
    width: 100%; 
    height: 300px; 
    z-index: 10; 
    opacity: 0.4; 
} 
div a { 
    display: block; 
    z-index: 100; 
} 

有誰知道解決這個問題，或者我必須創建懸停圖像精靈和開關掉背景圖片？

Answer 1

問題是您沒有對<a>本身應用位置（z-index僅適用於positioned elements)只包含div和僞元素，所以僞元素位於鏈接頂部。它被點擊

所有你需要做的就是給鏈接堆疊環境，如包括相對定位：

div a { 
display: block; 
position: relative; 
z-index: 100; 
} 

Example