Mit HTML und CSS können Webentwickler viele Dinge tun, um die Anwendung oder Webseiten zuverlässiger und effektiver zu gestalten. Das Einbetten reaktionsschneller Elemente ist einer von ihnen. Insbesondere bedeutet das Responsive Element, wenn Benutzer eine Webseite auf jedem Gerät öffnen. Es beeinflusst die Sichtbarkeit nicht auf die Sichtbarkeit. Durch das Hinzufügen von ansprechenden Bildern in CSS wird die Bildschirmgröße automatisch geändert.

Dieser Beitrag erklärte reaktionsschnelle CSS -Hintergrundbilder.

So fügen Sie reaktionsschnelle CSS -Hintergrundbilder hinzu?

Um das reaktionsschnelle Bild als Hintergrund hinzuzufügen, befolgen Sie die folgenden Anweisungen.

Schritt 1: DIV -Container erstellen

Erstellen Sie zunächst einen DIV -Behälter mit Hilfe des “"Tag und zuweisen Sie es" ein "AusweisAttribut mit einem Wert Ihrer Wahl.

Schritt 2: Überschrift einfügen

Als nächstes fügen Sie eine Überschrift in die “hinzu“"Element, indem Sie die" verwenden "

" Schild. Fügen Sie danach einen Text zwischen den "" -Tags hinzu:

Hintergrundbild

Buntes Bild von Blättern, die als Hintergrund dieser Seite festgelegt sind. Jetzt können wir jedes Dokument auf dieser Seite erstellen.

Schritt 3: Hintergrundbild setzen

Um das Hintergrundbild des Elements festzulegen, greifen Sie zunächst mit Hilfe des “auf das Element zuAusweis”Attribut. Dann fügen Sie das hinzu “Hintergrundbild”CSS -Eigenschaft, um das Bild auf die Rückseite des Elements zu setzen. Der Wert dieser Eigenschaft gibt die URL des Bildes an.

Schritt 4: Hintergrundbild reagieren

Fügen Sie die folgenden CSS -Eigenschaften ein, um das Hintergrundbild ansprechend zu machen:

#img-background
Hintergrundbild: URL (Emoji.png ');
Höhe: 100%;
Breite: 100%;
Hintergrundgröße: Cover;
Hintergrundrepeat: No-Repeat;
Grenze: automatisch solide Rot;

Die Beschreibung des oben genannten Codes wird wie folgt erwähnt:

• Der "HöheEigenschaft, die zur Festlegung der Höhe des Elements verwendet wird.
• “BreiteDie Eigenschaft wird zur horizontalen Definition der Elementgröße verwendet.
• “HintergrundgrößeDie Eigenschaft wird verwendet, um die Größe des Bildes festzulegen. Zum Beispiel haben wir ihren Wert als "AbdeckungUm das Bild im Element zu füllen.
• “Hintergrund WiederholungEigenschaften legt fest, ob das Bild wiederholt wird oder nicht.
• “GrenzeDie Funktion wird zum Hinzufügen des Randes um das Element verwendet.

Es kann beobachtet werden, dass wir das Hintergrundbild erfolgreich ansprechend gemacht haben:

Wir haben die Methode zum Hinzufügen eines reaktionsschnellen Hintergrundbildes mit CSS erklärt.

Abschluss

Um das reaktionsschnelle CSS -Hintergrundbild hinzuzufügen, erstellen Sie zunächst einen Container zusammen mit dem Attribut „ID“. Greifen Sie dann mit "ID" in CSS auf das DIV -Element zu und betten Sie das Hintergrundbild mit dem "Hintergrundbild”CSS -Eigenschaft. Danach, "Hintergrundgröße","Hintergrund Wiederholung", Und "GrenzeEigenschaften werden auch verwendet, um das Bild ansprechend zu machen. Dieser Beitrag hat gezeigt, wie das reaktionsschnelle Hintergrundbild in CSS festgelegt wird.