.role-card-group {
display: flex;
justify-content: space-evenly;
}
.role-card {
height: 200px;
width: 12%;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.role-card p {
color: #fff;
text-decoration: none;
}
.role-card::before {
content: '';
background-color: #007BC7;
height: 200px;
width: 100%;
opacity: 0.7;
position: absolute;
}
<div class="role-card-group">
<a href="" class="role-card">
<p>Cliente</p>
</a>
<a href="" class="role-card">
<p>Corretor</p>
</a>
<a href="" class="role-card">
<p>Parceiro</p>
</a>
</div>
出于某种原因,我认为before伪类在文本上应用了不透明性,因此我需要在卡内使用白色文本。
::before
psuedoelement与该段落重叠,因为它的位置:绝对
通过将z-index: -1
添加到.role-card::before
来更改堆栈顺序
.role-card-group {
display: flex;
justify-content: space-evenly;
}
.role-card {
height: 200px;
width: 12%;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.role-card p {
color: #fff;
text-decoration: none;
}
.role-card::before {
content: '';
background-color: #007BC7;
height: 200px;
width: 100%;
opacity: 0.7;
position: absolute;
z-index: -1;
}
<div class="role-card-group">
<a href="" class="role-card">
<p>Cliente</p>
</a>
<a href="" class="role-card">
<p>Corretor</p>
</a>
<a href="" class="role-card">
<p>Parceiro</p>
</a>
</div>
可选,如果您不能为伪元素分配负的z-index,则可以为段落分配z-index
(以及non-static位置,例如position: relative
)
.role-card-group {
display: flex;
justify-content: space-evenly;
}
.role-card {
height: 200px;
width: 12%;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.role-card p {
color: #fff;
text-decoration: none;
position: relative;
z-index: 1;
}
.role-card::before {
content: '';
background-color: #007BC7;
height: 200px;
width: 100%;
opacity: 0.7;
position: absolute;
}
<div class="role-card-group">
<a href="" class="role-card">
<p>Cliente</p>
</a>
<a href="" class="role-card">
<p>Corretor</p>
</a>
<a href="" class="role-card">
<p>Parceiro</p>
</a>
</div>
将z-index: 9
添加到p
或z-index: -1
到元素之前,以防止元素重叠。
.role-card-group {
display: flex;
justify-content: space-evenly;
}
.role-card {
height: 200px;
width: 12%;
position: relative;
display: flex;
justify-content: flex-end;
align-items: flex-end;
}
.role-card p {
color: #fff;
text-decoration: none;
**z-index: 9;**
}
.role-card::before {
content: '';
background-color: #007BC7;
height: 200px;
width: 100%;
opacity: 0.7;
position: absolute;
}
伪元素在呈现html之后呈现。这就是为什么它在内容之后出现在DOM中,因此将位于文本上方的原因。因此,一种解决方案是将z-index:-1添加到伪类中,或者使用背景:rgba(value,value,value,opacity)