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

【问题标题】：How do I handle independent parent and child opacities when the child element is a link?当子元素是链接时，如何处理独立的父子不透明度？
【发布时间】：2013-04-27 02:00:24
【问题描述】：

我有一个父母 <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;
}

有谁知道这个问题的解决方案，还是我必须创建一个图像精灵并在悬停时切换交换背景图像？

【问题讨论】：

标签： html css opacity

【解决方案1】：

问题是您没有将位置应用于<a> 本身（z-index 仅适用于 positioned elements) 仅包含 div 和伪元素，因此伪元素位于顶部阻止它被点击的链接。

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

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

Example

【讨论】：

堆叠上下文，明白了。您的解决方案完美运行。谢谢！