当child元素是链接时，如何处理独立的父级和子级不透明度？

Question

我有一个父母<div>和一个孩子<a> 。 父级的背景图片设置为60％不透明度，但是我希望子链接具有100％的透明度。 我以这种方式实现它的原因是，这样我就可以在悬停时将父级的不透明度降低到100％，从而消除了悬停图像的需要。

我了解孩子会继承其父母的不透明度。 我尝试了此处介绍的:after {}技术，但是即使设置了适当的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

问题在于，您不会仅对包含div和伪元素的<a>本身施加位置（z-index仅适用于positioned elements) ，因此伪元素位于链接的顶部，从而防止了从点击它。

您需要做的就是为链接提供一个堆叠上下文，例如，包括相对定位：

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

例