为何opacity会影响主内容？如何实现背景半透明内容不透明

你的问题核心是绝对定位的半透明遮罩层覆盖在了内容之上，导致视觉上内容跟着呈现半透明效果——哪怕你给内容设置了opacity:1，也会因为上层遮罩的遮挡，让内容看起来透了一层半透明色。

方案一：调整层级让内容显示在遮罩上层 #

保留原有HTML结构，通过修改CSS的定位和层级关系，让内容处于遮罩层上方：

.opening-job-parent{
    background-image: url("./images/header-banner-image-one.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vh;
    width: 100%;
    position: relative;
    margin-bottom: 50px;
}

.opening-job-parent .empty-div{
    background-color: #7f73eb;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0.8;
    z-index: 1; /* 给遮罩设置较低层级 */
}

.opening-job-container{
    color: white;
    position: relative; /* 开启层级上下文 */
    z-index: 2; /* 让内容层级高于遮罩 */
    height: 100%;
    display: flex;
    align-items: center; /* 垂直居中内容，匹配预期效果 */
    padding: 0 2rem; /* 给内容添加左右内边距 */
}

方案二：移除空div，用rgba实现更简洁的遮罩 #

不需要额外的空div，直接通过父元素的背景叠加实现半透明效果，减少冗余DOM：

修改后的CSS #

.opening-job-parent{
    /* 用linear-gradient叠加半透明背景和原图，替代空div */
    background: linear-gradient(rgba(127, 115, 235, 0.8), rgba(127, 115, 235, 0.8)), url("./images/header-banner-image-one.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vh;
    width: 100%;
    margin-bottom: 50px;
    display: flex;
    align-items: center; /* 垂直居中内容 */
    padding: 0 2rem; /* 左右内边距 */
}

.opening-job-container{
    color: white;
}

修改后的HTML（移除空div） #

<section class="opening-job-parent">
    <div class="opening-job-container">
        <div class="opening-job-details">
            <div class="opening-job-text">
                <h1>Over 10k opening jobs</h1>
                <p>If you are looking for free HTML templates, <br> you may visit Tooplate website. <br> If you need
                    a
                    collection of free templates, <br> you can visit Too CSS website.</p>
            </div>
            <div class="opening-job-account-link">
                <a href="#">Create an account</a>
                <a href="#">Post a job</a>
            </div>
        </div>
    </div>
</section>

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