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

Question

I am trying to prevent the opacity property from applying to the child elements.

I was under the assumption that the below piece of code would do that, but it isn't working.

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

Answer 1

One solution is using rgba :

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

Answer 2

The reason your current solution doesn't work is because your :after pseudo element does not have any content set (therefore it is not rendered), and it is not positioned properly. Try this instead.

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

It works because the :after pseudo element renders inside the element which it is meant to come after, by then positioning and setting this pseudo element to always be the same size as its parent element, you get a parent element with a transparent background.

You should also make sure that you child element has its position property set (because setting the z-index doesn't work without a position property set) and a z-index higher than the z-index of the :after pseudo element ( 1 is fine in this case):

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

That should do the trick for you. Here's a jsFiddle , the background is set to be black.