Hintergrundbild verdunkeln in CSS

1. Verwenden Sie den linearen Farbverlauf, um das Hintergrundbild in CSS abzudunkeln
2. Verwenden Sie die Eigenschaft background-blend-mode, um das Hintergrundbild in CSS abzudunkeln

In diesem Artikel stellen wir einige Methoden vor, um Hintergrundbilder in CSS abzudunkeln.

Verwenden Sie den linearen Farbverlauf, um das Hintergrundbild in CSS abzudunkeln

Wir können den CSS Linear Gradient verwenden, um das Hintergrundbild in CSS abzudunkeln. Die Funktion linear-gradient() erzeugt einen Hintergrund mit einem linearen Verlauf. Ein linearer Farbverlauf ist ein sanfter Übergang zwischen mindestens zwei verschiedenen Farben. Die Funktion benötigt unzählige Farbparameter. Als ersten Parameter können wir die Richtung des Gradienten festlegen. Die Optionen der Richtungen sind to right, to left, to bottom right, 90deg usw. Wir können den linearen Verlauf auf das Hintergrundbild anwenden und die dunklere Farbe mit Deckkraft einstellen, um das Hintergrundbild abzudunkeln. Wir können die Funktion rgba() in der Funktion linear-gradient() verwenden, um die Farben einzustellen. Hier werden wir nur das Hintergrundbild abdunkeln, ohne andere Elemente abzudunkeln.

Wählen Sie beispielsweise den Container in CSS aus und verwenden Sie die Abkürzungseigenschaft background, um den linearen Verlauf und das Hintergrundbild festzulegen. Schreiben Sie die Funktion linear-gradient() und geben Sie die beiden Farbstopps als rgba(0, 0, 0, 0.7) an. Als nächstes verwenden Sie die Funktion url(), um ein Hintergrundbild Ihrer Wahl zu setzen. Verwenden Sie die verschiedenen Hintergrundeigenschaften, um das Bild richtig im Hintergrund zu platzieren. Stellen Sie background-position auf center, background-repeat auf no-repeat und background-size auf cover. Stellen Sie die Höhe auf 100%. Achten Sie darauf, die Tags body und html auszuwählen und stellen Sie die Höhe auf 100% und den Rand auf 0.

Im folgenden Beispiel haben wir rgba(0, 0, 0, 0.7) als die beiden Farbstopps verwendet. Die Funktion rgba(0, 0, 0) entspricht der schwarzen Farbe. Der vierte Wert ist der Wert für die Deckkraft. Der Wert näher bei 1 macht es dunkler und umgekehrt. Wir können den Deckkraftwert entsprechend der Notwendigkeit anpassen, das Hintergrundbild abzudunkeln. Auf diese Weise können wir den linearen Verlauf verwenden, um das Hintergrundbild in CSS abzudunkeln.

Beispielcode:

<div id="background"></div>

body, html {
    height: 100%;
    margin: 0;
}

#background {
    background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)), url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Verwenden Sie die Eigenschaft background-blend-mode, um das Hintergrundbild in CSS abzudunkeln

Wir können die Eigenschaft background-blend-mode verwenden, um das Hintergrundbild in CSS abzudunkeln. Die Eigenschaft legt den Mischmodus des Hintergrunds fest. Für diese Immobilie gibt es verschiedene Möglichkeiten. Einige Optionen sind normal, multiply, darken, lighten, saturation usw. Mit der Option darken können wir das Hintergrundbild dunkler machen. Mit der Funktion rgba() können wir die Farbe des Hintergrundbildes einstellen.

Wählen Sie beispielsweise in CSS die ID background aus und verwenden Sie die Eigenschaft background, um die Farbe und das Hintergrundbild festzulegen. Stellen Sie die Farbe als rgba(0, 0, 0, 0.7) ein und verwenden Sie ein Platzhalterbild in der Funktion url(). Verwenden Sie die unterschiedlichen Hintergrundeigenschaften wie bei der ersten Methode, um das Bild richtig einzustellen. Als nächstes verwenden Sie die Eigenschaft background-blend-mode und stellen sie auf darken.

Auf diese Weise können wir das Hintergrundbild mit der Eigenschaft background-blend-mode abdunkeln.

Beispielcode:

#background {
    background: rgba(0, 0, 0, 0.7) url('https://loremflickr.com/320/240');
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: darken;
}

<div id="background"></div>