Wie kann ich ein Hintergrundbild nur mit CSS mit einer Farbe überlagern?

Bilder mit Farbe mithilfe von CSS überlagern

Suchen Sie nach einer Methode, um die visuelle Darstellung Ihrer Website zu verbessern, indem Sie ein Hintergrundbild mit einer Farbe überlagern, ohne auf zusätzliche Hilfsmittel zurückgreifen zu müssen Elemente? CSS bietet eine elegante Lösung, die zusätzliche DIVs oder Hover-Effekte überflüssig macht.

Verwendung von Farbverläufen für Überlagerungen

Ein Ansatz besteht darin, mehrere Hintergründe zu verwenden. Sie können beispielsweise einen durchscheinenden Farbverlauf über Ihrem Bild erstellen:

html {
  min-height: 100%;
  background:
    linear-gradient(0deg, rgba(255, 0, 150, 0.3), rgba(255, 0, 150, 0.3)),
    url(image.jpg);
  background-size: cover;
}

Verwendung von eingefügtem Schatten

Alternativ können Sie einen deutlichen eingefügten Schatten erstellen:

.overlay {
  inset: 0;
  box-shadow: inset 0 0 9999px 100% rgba(0, 0, 0, 0.8);
}

Fügen Sie diesen CSS-Block in das übergeordnete Element des Hintergrundbilds ein.

Beides Diese Techniken erzielen den gewünschten Effekt, da Sie Ihrem Hintergrundbild ausschließlich mit CSS eine einfarbige Überlagerung hinzufügen können.

Das obige ist der detaillierte Inhalt vonWie kann ich ein Hintergrundbild nur mit CSS mit einer Farbe überlagern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!