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

Question

我试图阻止不透明度属性应用于子元素。

我假设下面的代码可以做到这一点，但是它不起作用。

.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属性集的情况下不起作用)和z-index高于:after伪元素的z-index(在这种情况下1很好):

.22 > yourchildelement
{
    position: relative;
    z-index: 1;
}

那应该对你有用。这是一个jsFiddle，背景设置为黑色