相关疑难解决方法(0)

我有一组<a>标签具有不同的rgba背景颜色但相同的alpha.是否可以编写单个css样式,仅更改rgba属性的不透明度？

代码的快速示例:

 <a href="#"><img src="" /><div class="brown">Link 1</div></a>
 <a href="#"><img src="" /><div class="green">Link 2</div></a> 

和风格

a {display: block; position: relative}
.brown {position: absolute; bottom: 0; background-color: rgba(118,76,41,.8);}
.green {position: absolute; bottom: 0; background-color: rgba(51,91,11,.8);}

我想要做的是写一个单一的样式,它会在<a>悬停时改变不透明度,但保持颜色不变.

就像是

a:hover .green, a:hover .brown {background-color: rgba(inherit,inherit,inherit,1);}

如果我们z-index结合使用position: absolute;它可能会将::before元素置于其自身之下.另一个问题有一个很好的例子(jsfiddle.net/Ldtfpvxy).

基本上

<div id="element"></div>

#element { 
    position: relative;
    width: 100px;
    height: 100px;
    background-color: blue;
}

#element::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

呈现:

因此堆叠上下文/顺序由定义z-index.但是,当我申请z-index: 1;到的元素,z-index: -1;它的::before我不能达到同样的事情.

只有我省略z-index了元素.

任何想法为什么会这样？该元素是否在其::before&::afterpseudos 之后呈现,以便它们变得相同z-index？

工作: …