Bild mit Farbe in CSS überlagern
-
Verwenden Sie die Funktion
rgba(), um das Hintergrundbild mit Farbe in CSS zu überlagern -
Verwenden Sie die Funktion
linear-gradient, um Hintergrundbild mit Gradient in CSS zu überlagern -
Verwenden Sie die Eigenschaft
background-blend-mode, um das Hintergrundbild mit einem Farbverlauf in CSS zu überlagern
Dieser Artikel stellt einige Methoden vor, um ein Bild mit Farbe in CSS zu überlagern.
Verwenden Sie die Funktion rgba(), um das Hintergrundbild mit Farbe in CSS zu überlagern
Wir können die Funktion rgba() verwenden, um eine Farbüberlagerung über einem Bild zu erstellen. Wir können die Funktion als Wert der Eigenschaft Hintergrund verwenden.
Die Syntax der Funktion rgba() sieht so aus.
rgba(red, green, blue, opacity);
Hier wird die rote, grüne und blaue Farbe auf einen Wert zwischen 0-255 und eine Deckkraft im Bereich von 0-1 eingestellt. Wenn der Opazitätswert auf 0 eingestellt ist, ist es vollständig transparent, und wenn der Opazitätswert auf 1 eingestellt ist, ist es vollständig undurchsichtig.
Wir können eine Überlagerung erstellen, indem wir einfach eine Farbe über einem Bild hinzufügen und seine Deckkraft verringern.
Erstellen Sie beispielsweise ein div-Tag und geben Sie ihm die ID main. Erstellen Sie dann ein div innerhalb des Headers und geben Sie ihm eine Klasse overlay.
Erstellen Sie als nächstes einen Absatz p und schreiben Sie etwas Text. Setzen Sie in CSS das Hintergrundbild auf die main-ID, so dass background: url("") no-repeat fixed.
Die Eigenschaft background-repeat ist no-repeat und die Eigenschaft background-position ist fixed. Als nächstes geben Sie dem div die Höhe 100%, um seine Höhe entsprechend dem Inhalt anzupassen.
Setzen Sie die Overflow-Eigenschaft auf hidden, um den Inhalt zu verbergen, der aus dem Container überläuft. Stellen Sie außerdem die color auf white, um den Text besser sichtbar zu machen.
Setzen Sie abschließend die Eigenschaft position auf absolute.
Als nächstes müssen wir ein Overlay erstellen, indem wir das Div overplay gestalten. Geben Sie ihm eine Hintergrundfarbe zusammen mit der Deckkraft, so dass Hintergrund: rgba(50, 70, 80, 0.7);.
Setzen Sie die Eigenschaft height auf 100%, um sie an die Höhe des übergeordneten Elements anzupassen. Setzen Sie die Eigenschaft overflow von div wie oben auf hidden.
Das folgende Beispiel zeigt, dass das div mit dem Klassennamen overlay über dem main div erscheint. Da das div eine transparente Hintergrundfarbe hat, ist das Hintergrundbild sichtbar.
Beispielcode:
<div id="main">
<div class="overlay">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
#main {
background: url("/img/DelftStack/logo.png") no-repeat fixed;
height: 100%;
overflow: hidden;
color: #FFFFFF;
position: absolute;
}
.overlay {
background: rgba(50, 70, 80, 0.7);
overflow: hidden;
height: 100%;
}
Verwenden Sie die Funktion linear-gradient, um Hintergrundbild mit Gradient in CSS zu überlagern
Ein linearer Farbverlauf ist eine CSS-Funktion, die ein farbenfrohes Bild eines progressiven Übergangs zwischen zwei oder mehr Farben entlang einer geraden Linie erstellt. Verschiedene Farben werden gemischt und verschiedene Richtungen ergeben ein buntes Muster.
Wir können linear-gradient als Hintergrundfarbe verwenden und es kann auch als Bildüberlagerung verwendet werden. Um es jedoch als Bildüberlagerung zu verwenden, müssen wir es mit dem Hintergrundbild verwenden.
Farben mit geringerer Deckkraft sollten linear-gradient sein, um das Hintergrundbild sichtbar zu machen.
Der erste Parameter der Funktion linear-gradient ist die Richtung des Gradienten. Danach können wir die Farbstopps nach unseren Bedürfnissen spezifizieren.
Erstellen Sie beispielsweise ein div mit einer ID main. Wählen Sie die ID in CS aus und stellen Sie die Höhe und Breite des Containers auf 100vh und 100% ein.
Stellen Sie dann den linearen Farbverlauf und das Hintergrundbild mit der Kurzschrifteigenschaft background ein. Schreiben Sie die Eigenschaft linear-gradient und verwenden Sie die Richtung to right als ersten Parameter.
Verwenden Sie als nächstes die Funktion rgba(), um den Farbverlauf festzulegen. Schreiben Sie rgba(50, 70, 80, 0.7) als ersten Farbstopp und fügen Sie rgba(30, 20, 150, 0.7) als zweiten Farbstopp hinzu.
Verwenden Sie nach der Funktion linear-gradient die url(), um das Bild einzufügen, und die Optionen no-repeat und fixed für das Hintergrundbild.
Hier haben wir zwei Farben in linear-gradient mit einer Deckkraft von 0.7 in jeder Farbe verwendet. Der Wert to right innerhalb des linear-gradient gibt das Muster oder die Richtung der Farbe an.
Das bedeutet, dass die linke Seite des Containers die Farbe rgba(50, 70, 80, 0.7) enthält und sich die Farbe allmählich zu rgba(30, 20, 150, 0.7) ändert, während Sie sich nach rechts bewegen.
Das folgende Beispiel zeigt, dass der linear-gradient eine Bildüberlagerung bietet, die zwei verschiedene Farben enthält, die sich von links nach rechts bewegen, aufgrund der Transparenz der Farbe, die im linear-gradient verwendet wird.
Beispielcode:
<div id="main">
</div>
#main {
height: 100vh;
width: 100%;
background: linear-gradient(to right, rgba(50, 70, 80, 0.7), rgba(30, 20, 150, 0.7)), url("/img/DelftStack/logo.png") no-repeat fixed;
}
Verwenden Sie die Eigenschaft background-blend-mode, um das Hintergrundbild mit einem Farbverlauf in CSS zu überlagern
Die Eigenschaft background-blend-mode legt fest, wie sich die Hintergrundbilder eines Elements mit der Hintergrundfarbe des Elements vermischen sollen. Die Eigenschaft nimmt Werte an wie lighten, darken, multiply, saturation, overlay, soft-light, color-dodge, hard-light usw.
Die Eigenschaft background-blend-mode mischt die background-color mit dem background-image. Der Standardwert der Eigenschaft background-blend-mode ist normal.
Wir können die Eigenschaft verwenden, um das Hintergrundbild zu überlagern. Wir können die Eigenschaft background-blend-mode verwenden, nachdem wir das Hintergrundbild eingestellt haben.
Erstellen Sie zum Beispiel ein div in HTML. Legen Sie in CSS das Hintergrundbild mit der Funktion url() fest und setzen Sie in der Eigenschaft background die Werte no-repeat und fixed.
Stellen Sie als nächstes die Höhe für das div auf 100vh ein. Übernehmen Sie den Wert hidden für die Eigenschaft overflow.
Setzen Sie ebenso die Eigenschaft background-color auf den Wert rgba(50, 70, 80, 0.7). Verwenden Sie schließlich den background-blend-mode und setzen Sie seinen Wert auf soft-light, um dem Hintergrundbild einen Overlay-Effekt hinzuzufügen.
Beispielcode:
<div id="main">
</div>
#main {
background: url("/img/DelftStack/logo.png") no-repeat fixed;
height: 100vh;
overflow: hidden;
background-color: rgba(50, 70, 80, 0.7);
background-blend-mode: soft-light;
}