如何在opacity为0.6的背景元素上方叠加放置文字内容？

你当前的DOM结构已经把背景层和文字层拆成了独立的兄弟节点，理论上opacity不会互相影响，现有代码不生效是缺失了两个关键配置：

• 文字容器.bigText设置了top偏移属性，但没有声明定位属性，top只有在position值为relative/absolute/fixed时才会生效
• 没有给文字容器设置高于背景层的z-index，导致文字层级可能低于背景层，视觉上看起来像被透明度影响

方案1：直接修复现有代码 #

修改CSS如下：

.c{
    display: flex;
    padding-top: 18em;
    position: relative; /* 给父容器加相对定位，让内部绝对定位元素基于父容器偏移 */
    .backgroundDiv{
        background: url("/images/DSC8253.png");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center ;
        height: 20em;
        opacity: 0.6;
        position: absolute;
        left: 0; /* 对齐父容器左侧 */
        top: 0; /* 对齐父容器顶部 */
        width: 100%;
        z-index: 1; /* 背景层层级设为1 */
    }
}
.bigText{
    display: flex;
    text-transform: uppercase;
    font-size: 3em;
    font-family: cursive;
    font-weight: 600;
    height: 8em;
    position: relative; /* 加相对定位，top属性才能生效 */
    z-index: 2; /* 文字层层级高于背景层，完全不受背景透明度影响 */
    top:2em;
}

方案2：更简洁的伪元素实现（无需单独写背景div） #

可以直接用父容器的伪元素做背景，减少冗余DOM节点：

CSS代码 #

.c{
    display: flex;
    padding-top: 18em;
    position: relative;
    height: 20em;
}
/* 用伪元素做背景 */
.c::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("/images/DSC8253.png") no-repeat center center / cover;
    opacity: 0.6;
    z-index: 1;
}
.bigText{
    display: flex;
    text-transform: uppercase;
    font-size: 3em;
    font-family: cursive;
    font-weight: 600;
    height: 8em;
    position: relative;
    z-index: 2;
    top:2em;
}

HTML代码（可删除单独的backgroundDiv节点） #

<section class="c">
    <div class="bigText">
        <p>Pilki-HUILKI</p>
    </div>
</section>

两种方案都可以保证文字完全不受背景透明度影响，正常清晰显示。

内容的提问来源于stack exchange，提问作者DeanWinchester88