html - 如何在不影响子文本的情况下为背景图像添加特定的不透明度？

Question

我尝试放置不透明度较低的背景图像，但不幸的是文本也受到不透明度的影响。我尝试使用背景 rgba 和伪元素，但没有成功。你有什么建议吗？

.news {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background: transparent url(https://upload.wikimedia.org/wikipedia/commons/thumb/b/b5/Lion_d%27Afrique.jpg/1024px-Lion_d%27Afrique.jpg) no-repeat center center;
    background-size: cover;
    margin-top: 10vh;
    margin-bottom: 10vh;
    height: 30vh;
    white-space: nowrap;
}

.subtitlesec {
    font-family: 'Roboto', sans-serif;
    font-size: 2rem;
    font-weight: 500;
    text-transform: uppercase;
    color: #34b828;
    grid-column: 1/4;
    grid-row: 1/4;
    place-self: center;
}

.discoverBox {
    grid-column: 2/3;
    grid-row: 3/5;
    place-self: center;
}

.discover {
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    color: #ad6506;
    border: 2px solid #01172e;
    border-radius: 20px;
    padding: 1.3vh;
    background-color: white;
}

<section>
        <div class="news">
            <span class="subtitlesec">Nouveautés</span>
            <div class="discoverBox"><button class="discover">découvrir</button></div>
        </div>
    </section>

标签： htmlcssbackground-imageparent-childopacity