CSS nach Bild

Wir verwenden den "After" -Sähler für Bildüberlagerungen in CSS. Überlagerungen sind definiert als die Beschichtung über etwas. Ein Bildüberzug bedeutet, dass wir das Bild mit einer gewissen Beschichtung abdecken, damit es vom Text getrennt ist. Die Bilder verwenden unterschiedliche Farben, aber unser Text ist in einer Farbe, daher müssen wir die Überlagerung zwischen dem Text und dem Bild setzen. Dafür verwenden wir den "After" -Alektor oder den Pseudoelement in CSS, um diese Überlagerungen zwischen dem Bild und dem Text zu erzeugen, damit es nicht schwierig ist, den Text vom Bild zu trennen. Wir können den Text nicht auswählen, wenn zwischen dem Text und dem Bild keine Überlagerung vorhanden ist. Wenn wir jedoch das Overlay erstellen, werden wir den Text, den wir auf dem Bild schreiben, auswählen.

In diesem Tutorial werden Ihnen angezeigt. Wir werden den Bildüberlagerungseffekt mit Hilfe des „After“ -Pseudoelements hinzufügen.

Beispiel 1:

Um das "After" -Pseudo-Element in CSS zu verwenden, erstellen wir eine HTML-Datei. Der Code, den wir in der HTML -Datei schreiben, finden Sie in diesem Beispiel. Sie können den gewünschten Texteditor verwenden und damit beginnen, darauf zu codieren. Schreiben Sie den Code, der im folgenden Bild angezeigt wird. Wir schreiben diesen Code in die Visual Studio -Code -Software. Durch die Auswahl der HTML -Sprache in dieser neuen Datei schreiben wir einfach “!”. Drücken Sie die Eingabetaste und die erforderlichen Tags werden automatisch in dieser Datei angezeigt. Fangen Sie an, in seinem Körper zu kodieren.

Wir erstellen eine "Abschnittsklasse" mit dem Namen "Banner" und legen einen Übergang in dieses "Banner". Wir verknüpfen diese HTML auch mit der CSS -Datei, sodass alle Stile, die wir in der CSS -Datei durchführen. Wir speichern es mit dem “.HTML ”Dateierweiterung.

CSS -Code:

In diesem CSS-Code verwenden wir das "After" -Pseudoelement, um das Bildüberzug zu erstellen. Für die "Nachher" -Pseudoelement müssen wir den Inhalt haben, also setzen wir hier den „Inhalt“ ein. Nach dem Inhalt des Banners erstellen wir ein Element im „Banner“. Jetzt machen wir das "Display" "Block" und geben diesem Banner die "Position" als "absolut". Das "Top" und "links" sind beide "0". Dann setzen wir die „Breite“ auf „100%“ mit dem Wert „100%“ mit dem Wert „Höhe“. Wir verwenden das „Lineargradient“ für das „Hintergrundbild“, um das Bild attraktiver zu machen. Wir geben diesem „120 -°“. Dann setzen wir seine „Deckkraft“ und setzen die „0.7 ”Wert dafür. Wir verwenden den Z-Index-Wert hier und setzen dafür "0".

Dann setzen wir die Position des „Banners“ auf „Verwandte“. Wir verwenden auch das Hintergrundbild im Banner. Die "Polsterung", die wir dafür einstellen, ist "20VH" sowohl für "Top" als auch für "unten" und "0" für "links" und "rechts". Wir setzen das „Cover“ für die „Hintergrundgröße“ und den „Text-Align“ in das „Zentrum“. Jetzt verwenden wir das Banner und wählen alle Elemente des Banners mit dem Selektor "*" aus. Wenn wir diesen "*" -Sektor verwenden, enthält er alle Elemente und wendet das Styling an, das wir auf allen Elementen einsetzen. Da unsere Überlagerung sowohl den Text als auch das Bild abdeckt, verwenden wir den "Z-Index", um dies zu lösen, und setzen den Inhalt "Z-Index" auf "10" fest. Und setzen Sie den "Verwandten" für seine "Position".

Wir setzen die Inhaltsfarbe auf „schwarz“, damit der im Banner geschriebene Inhalt auf dem Bild schwarz erscheint. Wir „richten“ die Überschrift auf das „Zentrum“ und verwenden die Schriftfamilie „Algerian“ für diese Überschrift. Außerdem setzen wir seine Größe auf "40px".

Ausgang:
Sie können die Ausgabe im Standardbrowser erhalten, wenn Sie die Schaltfläche „Alt+B“ in der HTML -Datei auf die rechte Maustaste klicken und dann das "Standard in Standardbrowser öffnen" auswählen. Die angegebene Ausgabe wird auf dem Browser gerendert.

Beispiel #2:

Hier haben wir ein weiteres Beispiel, in dem wir die Überlagerung des Bildes mit demselben Pseudoelement erstellen und unseren Code ein wenig ändern und Ihnen zeigen, wie es funktioniert.

Der HTML -Code ist für dieses Beispiel der gleiche. Aber hier ändern wir die Überschrift, die im Banner geschrieben ist. Wir trennen diese Überschrift in zwei Zeilen, indem wir das verwenden “
" Schild.

Zuerst setzen wir die Überschrift ein wenig, indem wir einige Stileigenschaften darauf anwenden. Wir setzen die "Text-Align", "Schriftgröße" und "Schriftfamilie" der Überschrift. Dann kommt der „Nachher“ -Pseudo-Selektor, der eine Überlagerung zwischen dem Bild und dem Text erzeugt. Wann immer wir diesen „Nachher“ -Anterwählten in CSS verwenden, müssen wir zuerst den „Inhalt“ definieren. Danach setzen wir das "Display" auf "Block". Die Werte "Top" und "links", die wir hier vergeben, werden auf "0" gesetzt. Während die Werte „Breite“ und „Höhe“ auf "100" eingestellt sind. Anschließend wenden wir den „Linear-Gradienten“ an und wählen zwei Farben dafür aus, die „pink“ und „blau“ sind. Außerdem wird hier die Eigenschaft „Depazität“ verwendet, um eine transparente Sicht auf das Hintergrundbild zu geben. Wir setzen seinen Wert auf „0.6 ”. Wir verwenden den „Hintergrund-Scenery.JPG ”als Hintergrundbild dafür. Wir platzieren diesen Bildnamen in der Eigenschaft „Hintergrund-Image“ „URL“.

Anschließend verwenden wir die Polsterung, um den Speicherplatz zu erstellen und die Werte „Top“, „unten“, „rechts“ und „linke“ mit einer „Polster“ -Mobilie festzulegen. Hier definiert das „200VH“ die Polsterung „Top“ und „unten“ und die „0“ definiert die „linke“ und „rechte“ Polsterung. Die "Hintergrundgröße" ist "Cover", wie wir in unserem ersten Beispiel verwendet haben. Dann setzen wir das "Banner" und "Z-Index". Dafür verwenden wir zunächst das "After" Pseudo-Element. Im Inneren setzen wir den "-index" auf "1". Es gibt dem Overlay ein "1" Z-Index. Darunter setzen wir den "Z-Index" für den "Inhalt" und wenden "10" für den Inhalt Z-Index an. Wir verwenden den "*" Selektor mit dem "Banner", bevor wir dem Bannerinhalt einen Z-Index geben. Dieser Z-Index gilt für alle im Banner geschriebenen Inhalte. Wir verwenden auch den „Mix-Blend-Modus“ für das zuvor erstellte Overlay. Diese Eigenschaft „Mix-Blend-Mode“ hilft beim Mischen der mehreren Elemente.

Wenn wir diese Eigenschaft mit unserem Overlay verwenden, schafft sie einige erstaunliche neue Kombinationen für uns. Wir können unsere Überlagerung zu einem fortgeschrittenen Overlay machen, indem wir diese „Mix-Blend-Property“ in CSS verwenden. Nachdem wir diesen Code abgeschlossen haben, müssen wir ihn mit einem speichern.CSS ”Dateierweiterung wie die CSS -Datei.

Ausgang:

Abschluss

Wir haben das „Nachher“ -Pseudo-Element in CSS besprochen, um das Overlay-Bild in diesem Tutorial zu erstellen. Wir haben gelernt, dass die Überlagerung zwischen dem Hintergrundbild und dem Text erstellt wird, damit wir den Text auswählen können, was bedeutet, dass der Text vom Bild getrennt ist. Wir haben die „Mix-Blend-Property“ für diese Bildüberlagerungen verwendet, um sie attraktiver zu machen. Wir haben auch die verschiedenen Beispiele untersucht und diese Beispiele in diesem Tutorial erläutert. Wir haben alle Details in diesem Tutorial bereitgestellt, die für Sie erforderlich sind, um dies zu verstehen. Jetzt können Sie diese Überlagerungen in Ihren Projekten erstellen, nachdem Sie diese Beispiele verstanden haben, die Ihnen bei Ihrer zukünftigen Codierung viel helfen werden.