CSS | Über ein Bild eine schwarze transparente Fläche mit Text

Hey!

Ich bin gerade dabei ein Design über CSS zu erstellen und da ich eher der backend-entwickler bin, möchte ich mich jetzt mehr mit frontend beschäftigen.

Mein Problem:
Ein <div> Bereich der über CSS ein BG-Image besitzt. Ich möchte über dieses image eine leicht schwarze transparente Fläche drüberpacken, soweit so gut und hab es hinbekommen. Allerdings sollte der Text nicht von der Fläche überdeckt werden. Das kriege ich nicht ganz hin und spiele die ganze Zeit rum, habe schon gegoogelt und jetzt bin ich hier gelandet

<div class="k-container">
    <div class="k-card k-bgimage">
        <div class="transparent">
           <h1><?php the_title(); ?></h1>
        </div>
    </div>
</div>

.transparent {
  background: rgba(0,0,0,.4);
  z-index: -2;
}

Das ist mein letzter Stand. Bitte um Hilfe.