css - 防止不透明度 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属性集就无法设置）并且z-index高于伪元素z-index的（在这种情况下很好）：:after1

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

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