CSS bietet unterschiedliche Eigenschaften, um die HTML -Elemente zu stylen. Diese Eigenschaften werden für verschiedene Zwecke verwendet, z. B. das Hinzufügen eines Hintergrundbildes und -farbs und das Festlegen der Breite und Höhe der HTML -Elemente. Diese Eigenschaften umfassen Rand, Farbe, Breite, Höhe, Hintergrund, Hintergrundfarbe und vieles mehr. Insbesondere wird die Hintergrund- und Hintergrundfarbe verwendet, um den Hintergrund der HTML-Elemente festzulegen.

In diesem Handbuch lernen wir den Unterschied zwischen Hintergrund- und Hintergrundfarben im Detail kennen.

Lasst uns beginnen!

CSS -Hintergrundeigenschaft

Um den Hintergrund eines HTML -Elements anzupassen, das CSS “HintergrundImmobilien werden genutzt. Es ist ein Kurzeigeneignis von acht weiteren Immobilien, was bedeutet, dass Sie alle in einer Zeile verwenden können. Diese anderen Eigenschaften sind:

• Hintergrundfarbe
• Hintergrundbild
• Hintergrundposition
• Hintergrundgröße
• Hintergrund Wiederholung
• Hintergrund-Ursprung
• Hintergrundclip
• Hintergrundantrieb

Syntax

Hier ist die Syntax der Hintergrundeigenschaft:

Hintergrund: Farbbildposition/Größe wiederholen Ursprungs Clip -Anhang

Lassen Sie uns zur Erklärung aller oben genannten Eigenschaften nacheinander wechseln.

CSS Hintergrundfarbe Eigenschaft

Verwendung der "HintergrundfarbeEigenschaft können Sie die Farbe des Hintergrunds einstellen. Die Farbe erscheint hinter den HTML -Elementen.

Syntax

Die Syntax der Hintergrundfarbe ist:

Hintergrundfarbe: Farbe

Anstelle von "Farbe”, Sie können die Farbe des Hintergrunds festlegen, den Sie hinter den Elementen erscheinen möchten.

Beispiel

In der HTML -Datei erstellen wir zuerst einen Container mit dem Tag und fügen dann eine Überschrift und einen Absatz hinzu.

Html

LinuxHint

Willkommen auf unserer Webseite

In CSS werden wir die Höhe des DIV als „anpassen“ als "100%"Damit es auf der gesamten Seite und Schriftgröße des Textes als" erscheinen "xx-large”. Setzen Sie danach die Hintergrundfarbe als "Aqua”.

CSS

div
Höhe: 100%;
Schriftgröße: xx-large;
Hintergrundfarbe: Aqua;

Im folgenden Bild sehen Sie, dass die Hintergrundfarbe angewendet wird:

CSS-Hintergrund-Image-Eigenschaft

Der "HintergrundbildEigenschaft wird verwendet, um ein oder mehrere Bilder als Hintergrund der HTML -Elemente festzulegen. Sie können diese Eigenschaft verwenden, um verschiedene Hintergrundbilder für verschiedene Elemente hinzuzufügen.

Syntax

Die Syntax der Hintergrund-Image-Eigenschaft lautet:

Hintergrundbild: URL ()

Geben Sie hier den Weg des Bildes, das Sie als Hintergrund als Argument für die “festlegen möchtenURL ()”.

Beispiel

Fügen Sie in der Fortsetzung des vorherigen Beispiels ein Hintergrundbild in das "hinzu"div" Klasse. Wir werden die URL des Bildes als "als" hinzufügen "URL (IMG.JPG)”:

div
…
Hintergrundbild: URL (IMG.JPG);

Die folgende Ausgabe zeigt an, dass das Hintergrundbild erfolgreich hinzugefügt wurde:

Beachten Sie, dass das Bild wiederholt wird. Um dieses Problem zu lösen, lesen Sie die nächste Immobilie.

CSS-Hintergrund-Repeat-Eigenschaft

Wenn Sie ein Bild als Hintergrund auf einer Webseite hinzufügen, wird es standardmäßig wiederholt. Um diese Wiederholung zu vermeiden und das Muster entsprechend Ihrer Wahl festlegen, das “Hintergrund WiederholungImmobilien werden genutzt.

Syntax

Die Syntax der Hintergrund-Repeat-Eigenschaft lautet:

Hintergrundrepeat: Wiederholung | wiederholen-X | Wiederholung | No-Repeat

Die Beschreibung der angegebenen Werte der Hintergrund-Repeat-Eigenschaft ist unten angegeben:

• wiederholen: Es wird verwendet, um das Bild in beide Richtungen zu wiederholen, vertikal und horizontal.
• Wiederholung-X: Es wird verwendet, um die Wiederholung des Bildes nur horizontal festzulegen.
• Wiederholen Sie: y: Es gibt die vertikale Wiederholung des Bildes an.
• No-Repeat: Es wird verwendet, um die Wiederholung des Bildes zu vermeiden.

Beispiel

Hier setzen wir den Wert der Hintergrund-Repeat-Eigenschaft als "fest"No-Repeat”:

div
…
Hintergrundrepeat: No-Repeat;

Das Ergebnis des oben bereitgestellten Code ist unten angegeben. Sie können sehen, dass das Bild nicht mehr wiederholt wird:

CSS-Hintergrund-Positionseigenschaft

So setzen Sie die Position des Hintergrundbildes, das “HintergrundpositionEigenschaft wird verwendet. Sie können das Bild in verschiedenen Positionen anpassen.

Syntax

Die Syntax der Hintergrund-Positionseigenschaft ist:

Hintergrundposition: Wert

Anstelle von "Wert”, Sie können die Position des Bildes angeben.

Beispiel

Hier werden wir die Hintergrundposition als "festlegen" festlegen "Center”:

div
…
Hintergrundposition: Zentrum;

In der folgenden Ausgabe erscheint das Bild in der Mitte der Seite:

CSS Hintergrundgröße

Um die Größe des Hintergrundbildes festzulegen, ist das “HintergrundgrößeEigenschaft wird verwendet.

Syntax

Hintergrundgröße hat die folgende Syntax:

Hintergrundgröße: Länge | Abdeckung

Im Folgenden finden Sie die Beschreibung der Werte der Hintergrundgröße:

• Länge: Es wird verwendet, um die Breite und Höhe des Hintergrundbildes zu reparieren.
• Abdeckung: Es wird verwendet, um das Hintergrundbild im gesamten Hintergrund anzupassen.

Beispiel

Wir werden die Größe des Hintergrunds als "festlegen"100%Höhe und “80%" Breite:

div
…
Hintergrundgröße: 100% 80%;

Sie können sehen, dass das Bild basierend auf den angegebenen Abmessungen geändert wurde:

CSS-Hintergrund-Ursprung

Der "Hintergrund-UrsprungDie Eigenschaft wird verwendet, um den Positionierungsbereich des Hintergrundbildes anzupassen. Das Bild wird in der oberen linken Ecke als Standardeinstellung eingestellt.

Syntax

Die Syntax der Eigenschaft von Hintergrundorten lautet:

Hintergrund-Ursprung: Padding-Box | Border-Box | Inhaltsbox

Die Werte der Eigenschaft von Hintergrundorten werden nachstehend beschrieben:

• Padding-Box: Es ist der Standardwert der Eigenschaft im Hintergrund, die verwendet wird, um die Position des Hintergrundbilds anhand der Polsterungskante anzupassen.
• Border-Box: Es wird verwendet, um das Bild gemäß der Grenzkiste des Bildes festzulegen.
• Inhaltsbox: Es wird verwendet, um das Hintergrundbild gemäß dem Inhalt des Bildes festzulegen.

Notiz: Die Eigenschaft von Hintergrundorientin funktioniert nicht, wenn der Wert der Hintergrund-Einbindung als „als“ festgelegt wirdFest”.

Beispiel

Erstellen Sie zunächst einen Rand um den Container um den Container. Hier werden wir das vorherige Beispiel fortsetzen und den Padding -Wert als "festlegen" festlegen "10px”. Passen Sie danach die Randbreite als “an" an "an"15px", Stil als"Grat", Und Farbe als"RGB (1, 68, 68)”. Am Ende weisen wir den Wert der Hintergrund-Ursprung-Eigenschaft als “zu" zu "Content-Box”:

div
…
Polsterung: 10px;
Grenze: 15px Ridge RGB (1, 68, 68);
Hintergrund-Ursprung: Content-Box;

Das Ergebnis des obigen Code ist unten angegeben. Sie können sehen, dass die Position des Bildes entsprechend dem Inhalt der DIV festgelegt ist:

CSS-Hintergrund-Clip-Eigenschaft

Der "HintergrundclipEigenschaft funktioniert auf der Hintergrundfarbe des Elements. Sie können steuern, wie weit eine Hintergrundfarbe über ein Element über die Polsterung des Elements, seinen Rand und seinen Inhalt hinausgeht.

Syntax

Die Syntax der Hintergrund-Clip-Eigenschaft lautet:

Hintergrund-Ursprung: Border-Box | Padding-Box | Content-Box

Die Werte der Eigenschaft von Hintergrundorten werden nachstehend beschrieben:

• Border-Box: Es ist der Standardwert der Eigenschaft im Hintergrund, mit der die Hintergrundfarbe hinter dem Rand festgelegt wird.
• Padding-Box: Es wird verwendet, um die Farbe in der Polsterkiste des Elements anzupassen.
• Inhaltsbox: Es wird verwendet, um die Hintergrundfarbe gemäß dem Inhalt des Elements festzulegen.

Beispiel

Wir werden das vorherige Beispiel fortsetzen und den Wert des Grenzstils auf “ändern“gepunktet”Um die Eigenschaft von Hintergrund-Clip-Eigenschaften zu verstehen. Danach werden wir den Wert der Hintergrund-Clip-Eigenschaft als "festlegen" festlegen "Polsterung”:

div
…
Hintergrund-Clip: Padding-Box;

Die Ausgabe bedeutet, dass die weiße Hintergrundfarbe angezeigt wird, wenn die Randkante endete:

CSS-Hintergrund-Einbindung Eigenschaft

Der "HintergrundantriebDie Eigenschaft wird verwendet, um das Verhalten oder das Bild beim Scrollen der Seite anzupassen. Sein Verhalten kann mit anderen Elementen scrollen oder festgelegt werden.

Syntax

Die Syntax der Hintergrund-Einbindungsimmobilie lautet:

Hintergrund-Einbindung: Wert

Sie können den Wert der Hintergrundabrechnung als "festlegen" festlegen "Fest”Um das Hintergrundbild zu beheben oder“scrollen”, Damit das Bild mit der Seite scrollen kann.

Notiz: Standardmäßig wird der Wert der Hintergrund-Einbindung Eigenschaft als “festgelegtscrollen”.

Es ist ersichtlich, dass das zusätzliche Hintergrundbild nicht statisch ist, wenn wir gescrollt haben. Lassen Sie uns nun dieses Problem beheben.

Dazu setzen wir den Wert der Hintergrund-Einbindungsimmobilie als “als“Fest”:

div
…
Hintergrundantrieb: behoben;

Hier ist das Ergebnis, das zeigt, dass das Bild behoben wurde:

Gehen Sie nun auf den Vergleich zwischen Hintergrund- und Hintergrundfarbeneigenschaften.

CSS-Hintergrund gegen Hintergrundfarbe

Die angegebene Tabelle unterscheidet die Hintergrund- und Hintergrund-Farben-Eigenschaften auf der Basis ihrer Merkmale:

Merkmale	CSS -Hintergrund	CSS-Hintergrundfarbe
Typ	Es ist ein super Eigentum.	Es ist eine Unterkopie der Hintergrundeigenschaft.
Funktionalität	Es legt alle Hintergrundeigenschaften fest.	Es legt nur die Hintergrundfarbe fest.
Bereich	Es unterstützt alle Hintergrundeigenschaften	Es unterstützt nur Hintergrundfarbeneigenschaften
Eben	Wenn Sie mehrere Hintergrundwerte hinzufügen müssen, ist es einfach zu bedienen. Sie können die Werte aller Hintergrundeigenschaften gleichzeitig festlegen.	Es kann verwendet werden, wenn Sie nur eine einzelne Hintergrundfarbe hinzufügen müssen.
Syntax	Hintergrund: Werte (Werte sind BG-Farben, BG-Image und andere Eigenschaften)	Hintergrundfarbe: Farbe

Es wurde erklärt, wie sich die Eigenschaften von Hintergrundfarben von Hintergrundeigenschaften unterscheiden.

Abschluss

CSS “HintergrundEigenschaft ist eine Kurzeigeneigenschaft, mit der mehrere Hintergrundwerte gleichzeitig festgelegt werden, z. B. Farbe, Bild, Position, Größe, Herkunft und mehr. Andererseits, "Hintergrundfarbe”Wird nur verwendet, um dem Hintergrund Farbe zu verleihen. In diesem Leitfaden haben wir den Unterschied zwischen der CSS-Hintergrundeigenschaft und der CSS-Hintergrund-Color-Eigenschaft erörtert.