CSS -Hintergrundbild -Deckkraft, ohne den Text zu beeinflussen
Beispiel 1
Um die Deckkraft des Hintergrundbilds zu ändern, ohne den Text zu beeinflussen, müssen wir einen HTML -Code schreiben und die Deckkraft im CSS -Code ändern. Wir verwenden den Visual Studio -Code für diese Beispiele. Wir öffnen also die neue Datei in dieser Software und wählen die Sprache „HTML“ aus, und eine HTML -Datei wird erstellt. Dann beginnen wir in dieser Datei zu codieren. Nachdem wir unseren Code abgeschlossen haben, speichern wir ihn und die “.Die Dateierweiterung von HTML ”generiert diesen Dateinamen automatisch.
Mit einem Bild-Tag erstellen wir eine "Div" -Klasse "Demo-Wrap". Die Bildklasse, die wir verwenden, ist "Img-Bg". Jetzt müssen wir das Bild auf dem Hintergrund einstellen, damit wir "Hintergrund-Img SRC" verwenden und den Namen des Bildes, das wir als Hintergrundbild anzeigen möchten. Hier setzen wir die „Landschaft.JPG ”Bild als Hintergrundbild. Wir haben auch ein weiteres „Div“ im ersten Div, und der Name dieses Divs ist „Text“. Und im zweiten Div haben wir eine Überschrift „H1“ und geben eine Überschrift in dieser „Div“ ein. Schließen Sie dann beide „Div“ -Tags.
CSS -Code
Im angegebenen CSS -Code ändern wir die Deckkraft des Hintergrundbildes, aber die Textüberschrift, die wir auf diesem Bild schreiben, bleibt gleich. Die Hintergrundbilddeckigkeit ändert nicht die Deckkraft des Textes.
Wir verwenden „IMG-BG“, das der Name der Bildklasse ist, und setzen die Deckkraft des Bildes als „0).4 ”. Wir setzen das Hintergrundbild "Position" auf "absolut" fest. Die "linken" und "Top" sind beide auf "0" gesetzt. Die „Breite“, die wir hier einstellen, ist für das Hintergrundbild "100%" und "Höhe" ist "automatisch". Als nächstes entwerfen wir unseren Text, während wir ihn im „Zentrum“ ausrichten und seine „Schriftfamilie“ auf „algerisch“ setzen. Wir verwenden „schwarz“ als Farbe der Schriftart.
Ausgang
Sie können sehen, dass sich das Bild auf dem Hintergrund nicht in seiner ursprünglichen Farbe befindet, da wir „0 verwenden.4 ”Deckkraft für dieses Hintergrundbild. Es gibt jedoch keinen Einfluss auf den auf dem Bild geschriebenen Text. Auf diese Weise können wir die Opazität des Bildes ändern, ohne den Text zu beeinflussen.
Beispiel # 2
Durch Ändern des vorherigen HTML -Codes haben wir ein weiteres Beispiel erstellt. Aber diesmal haben wir das Bild mit CSS -Eigenschaften hinzugefügt.
Diese Datei definiert zwei Überschriften in der "Div" -Klasse. Wir haben "H1" und "H2" in der Div -Klasse mit dem Namen "Hero" in diesem Code. Wir werden das Hintergrundbild im unten angegebenen CSS -Code hinzufügen.
CSS -Code
Die Position der Div -Klasse „Held“ ist „relativ“, ihre Größe beträgt „90 VH“ und seine Breite beträgt „90%“. Die Anzeige für diese Div-Klasse "Held" ist "Flex", Gegenstand im "Zentrum" und "Justify-Content" in das "Zentrum". Das ":: vor" ist der "Pseudo-Selektor", der zum Platzieren des Hintergrundbildes vor dem ausgewählten Element verwendet wird. Wir setzen „Inhalt“ ein, setzen das „Hintergrundbild“ mit der „URL“ und geben den Namen des Bildes in diese URL ein. Die „Hintergrundgröße“ setzt das Bild des Hintergrunds auf "Cover", und seine "Position" ist "absolut". Dann sind die "oberen", "unten", "links" und "rechts" alle "0px". Hier ändern wir die „Deckkraft“ in „0.4 ”. Jetzt wenden wir den Stil auf die Überschriften an. Die Überschrift "Position", die wir festlegen, ist "relativ". Die Kopffarbe ist "rot". Die Größe dieser Überschrift lautet "25px" und die "Linienhöhe" ist "0".9 ”. Wir richten diese Überschrift auf das „Zentrum“ aus. Die Farbe der zweiten Überschrift ist "schwarz".
Ausgang
Hier erscheint das Hintergrundbild nicht in seiner ursprünglichen Farbe, da wir die Opazität des Bildes im CSS -Code festgelegt haben. Aber der Text auf dem Bild erscheint in der ursprünglichen Farbe.
Beispiel # 3
Wir erstellen eine weitere HTML -Datei. In diesem Code erstellen wir drei Absätze in der DIV -Klasse, und die von uns erstellte Div -Klasse heißt „ImagePC“, die als "ImagePC" bezeichnet werden.
CSS -Code
Wir werden das Hintergrundbild in den CSS -Code einfügen. Wir verwenden also den „vor“ Pseudo-Selektor, den wir im vorherigen Beispiel stillgelegt haben. Hier ist der Code der gleiche wie im zweiten Beispiel, aber wir ändern das Hintergrundbild und verwenden die Eigenschaft „Depazität“ auf einem anderen Bild. Hier sind "links", "rechts", "unten" und "oben" auf "0" gesetzt. Und „0.4 ”der Deckkraft wird für dieses Bild verwendet. Wir setzen den Absatz in die "relative" Position. Und setzen seine Höhe gleich “0.9px ”. Wir ändern auch die „Schriftgröße“ des Absatzes und setzen diese auf "25px". Die „algerische“ Schriftfamilie wird für den Absatz verwendet. Und wir setzen seine Top „200px“.
Ausgang
Sie können sehen, dass das Hintergrundbild etwas Transparenz zeigt. Hier verwenden wir 40% Opazität für dieses Hintergrundbild, aber Sie können feststellen, dass es sich nicht auf den auf dem Hintergrundbild geschriebenen Text auswirkt.
Beispiel # 4
Wir nehmen geringfügige Änderungen am vorherigen HTML -Code vor. In diesem Beispiel verwenden wir vier Absätze innerhalb der Namen „DIV“ und „GiveGivingageopc“ für diese Div -Klasse.
CSS -Code
Dieser CSS -Code entspricht dem vorherigen Code. Wir ändern jedoch die „URL“ des Hintergrundbildes. Wir verwenden den „Hintergrund-Scenery.JPG ’Bild hier. Denken Sie daran, dass Sie die richtige Bildverwaltung mit dem Namen des Bildes verwenden. Sie müssen den richtigen Weg des Bildes in diese „URL“ einfügen. Wir verwenden die „0.5 ”Wert für die Opazität des Hintergrundbildes in diesem Fall. Die von uns verwendete „Schriftgröße“ ist in diesem Beispiel für den Absatz „30px“. Wir haben die Absatz-Schriftfamilie auf "Times New Roman" gesetzt, und darüber hinaus ist "200px". Der Absatz erscheint in "Maroon" und ist "mutiger" in "Schriftgewicht" "mutiger".
Ausgang
Dieses Hintergrundbild zeigt 50% Deckkraft, während wir seinen Wert auf „0 festlegen.5 ”, aber der Text bleibt gleich. Dieser Depazitätswert gilt nicht für den Text.
Abschluss
Wir haben diesen Leitfaden vorgestellt, in dem wir die Deckkraft des Hintergrundbildes ändern, ohne den Text zu beeinflussen. Daher können Sie bestimmen. Wir haben verschiedene Beispiele erklärt und gezeigt, in denen wir die Eigenschaft „Opazität“ verwenden, um die Depazität des Hintergrundbildes zu ändern, aber der Text bleibt gleich. Nachdem Sie diese Anleitung gelernt haben, können Sie die Hintergrundbilder in Ihre Projekte einfügen und die Opazität des Hintergrundbilds festlegen, ohne den Text mithilfe der CSS -Eigenschaft zu beeinflussen.