자식 요소가 링크 일 때 어떻게 독립적 인 부모 및 자식 불투명도를 처리합니까?

Question

부모가 <div>이고 자식이 <a>입니다. 부모는 60 % 불투명도로 설정된 배경 이미지를 가지고 있지만 하위 링크가 100 % 불투명도가되도록하고 싶습니다. 이런 식으로 구현하는 이유는 부모의 불투명도를 마우스 오버시 100 %로 퇴색시킬 수 있으므로 마우스 오버 이미지가 필요하지 않습니다.

자녀가 부모의 불투명도를 상속 받았다고 알고 있습니다. 나는를보고 있지만 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- 색인은 포함 된 div와 의사 요소 만 적용되므로 positioned elements)에만 적용됩니다. 따라서 의사 요소가 링크 상단에 위치합니다. . 클릭되는 것을

당신이해야 할 모든 예는 상대 위치 포함, 링크를 스태킹 문맥을 줄입니다.

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

컨텍스트를 스태킹

Example