[当我在上面放白色时,CSS使文本消失

问题描述 投票:2回答:3

.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伪类在文本上应用了不透明性,因此我需要在卡内使用白色文本。

html css
3个回答
3
投票

::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>

0
投票

z-index: 9添加到pz-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;
}

0
投票

伪元素在呈现html之后呈现。这就是为什么它在内容之后出现在DOM中,因此将位于文本上方的原因。因此,一种解决方案是将z-index:-1添加到伪类中,或者使用背景:rgba(value,value,value,opacity)

© www.soinside.com 2019 - 2024. All rights reserved.