CSS: Eine dunkle Verlaufsebene auf Hintergrundbildern ergänzen, damit der Text lesbar ist

Manchmal ist der Text oder die Bildunterschrift auf einem Bild schlecht lesbar, je nach Farbkontrast zwischen Vordergrundelement und Hintergrund. Früher habe ich mein Bild dunkler oder heller bearbeitet, damit der HTML-Text hervorsticht und für die Nutzer lesbar ist. Hier ist aber eine viel einfachere Lösung mit ein paar Zeilen CSS!

HTML

Kopiere den Code unten und füge ihn in dein HTML-Dokument ein.

<div class="hero-outer">
    <div class="hero-inner">
        <p>CSS Gradient</p>
    </div>
</div>

CSS

Kopiere den Code unten und füge ihn in dein CSS-Dokument ein.

.hero-outer { position:relative; }
.hero-inner::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(to bottom, #000, transparent);
    opacity: 0.5;
}
.hero-inner { 
    background: url('https://identitydesign.us/wp-content/uploads/2026/11/300x200-gradient-1.jpg'); 
    width:100%;
    height: 400px;
    background-size:cover;
}
.hero-inner p { 
    color:#fff; 
    position:relative; 
    font-size: 50px !important; 
    padding-right: 40px;
    text-align: right;
    top: 20px;
    z-index: 1;
}