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.

  • Ehh kannst du über https://jsfiddle.net/ deinen Code teilen, wie das so aussieht? ^^


    Dann wäre es um einiges leichter dir zu helfen, da wir uns das dann besser vorstellen können und direkt deinen Code updaten können :)

    ast2ufdyxkb1.png


    Leute, lernt scripten und versucht mal lieber etwas selber zu schreiben, als es aus einem GF zu kopieren. :S

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