防止不透明度css应用于子元素

Question

我正在尝试阻止opacity属性应用于子元素。

我假设下面的代码会这样做，但它不起作用。

.22:hover:after {
background-color: black;
opacity: 0.1;
}

Answer 1

一种解决方案是使用rgba：

.22:hover:after {
    background-color: rgba(0, 0, 0, 0.1); // black with opacity 0.1
}

Answer 2

您当前的解决方案不起作用的原因是因为您的:after伪元素没有任何内容集（因此它没有呈现），并且它没有正确定位。试试这个。

.22:hover:after
{
    background-color: #000;
    opacity: 0.1;        
    content: ' ';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;  
    left: 0px;    
}

它的工作原理是因为:after伪元素在其后面的元素内部呈现，然后将此伪元素定位并设置为始终与其父元素的大小相同，您将获得父元素透明的背景。

您还应该确保您的子元素设置了position属性（因为设置z-index在没有设置position属性的情况下不起作用）和{{1}高于z-index伪元素的z-index（:after在这种情况下很好）：

1

那应该为你做的伎俩。这是一个 jsFiddle ，背景设置为黑色。