how to add a specific opacity to a background image without affecting the child texts?

Question

I try to put a background image with a low opacity but unfortunately the texts are also affected by the opacity. I tried to use background rgba and the pseudo element after without success. Do you have any suggestions?

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