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 :)


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


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

    Das ist mein letzter Stand. Bitte um Hilfe.

    • Offizieller Beitrag

    Hi. die wohl einfachste Lösung wäre die schwarze Farbe mit dem Bild zusammen zu definieren.


    https://jsfiddle.net/Loy0re2s/


    background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url(https://breadfish.de/images/background.png);


    Man kann leider keine einzelne Farbe als ersts Argument übergeben, daher ein Gardient, welches zwei gleiche Werte verwendet.