CSS-Hintergrund vs. Hintergrundfarbe

CSS bietet verschiedene Eigenschaften zum Gestalten der HTML-Elemente. Diese Eigenschaften werden für verschiedene Zwecke verwendet, z. B. zum Hinzufügen eines Hintergrundbilds und einer Farbe sowie zum Festlegen der Breite und Höhe der HTML-Elemente. Zu diesen Eigenschaften gehören Rand, Farbe, Breite, Höhe, Hintergrund, Hintergrundfarbe und viele mehr. Genauer gesagt wird die Eigenschaft background und background-color verwendet, um den Hintergrund der HTML-Elemente festzulegen.

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

Lasst uns beginnen!

CSS-Hintergrundeigenschaft

Um den Hintergrund eines beliebigen HTML-Elements anzupassen, muss das CSS „ Hintergrund „Eigentum wird verwertet. Es ist eine Kurzform von acht weiteren Eigenschaften, was bedeutet, dass Sie alle in einer Zeile verwenden können. Diese anderen Eigenschaften sind:

Hintergrundfarbe
Hintergrundbild
Hintergrund-Position
Hintergrundgröße
Hintergrund Wiederholung
Hintergrund-Herkunft
Hintergrund-Clip
Hintergrund-Anhang

Syntax

Hier ist die Syntax der Hintergrundeigenschaft:

Hintergrund: Position/Größe des Farbbildes Wiederholen des ursprünglichen Clip-Anhangs

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

CSS Eigenschaft background-color

Verwendung der ' Hintergrundfarbe ”-Eigenschaft können Sie die Farbe des Hintergrunds festlegen. Die Farbe erscheint hinter den HTML-Elementen.

Syntax

Die Syntax der Eigenschaft background-color lautet:

Hintergrundfarbe : Farbe

Anstelle von ' Farbe “ können Sie die Farbe des Hintergrunds festlegen, der hinter den Elementen erscheinen soll.

Beispiel

Zuerst erstellen wir in der HTML-Datei einen Container mit dem

-Tag und fügen dann eine Überschrift und einen Absatz hinzu.

HTML

< div >

< h1 > LinuxHinweis < / h1 >

< p > Willkommen auf unserer Webseite < / p >

< / div >

In CSS passen wir die Höhe des div an als „ 100% “, damit es auf der ganzen Seite und in der Schriftgröße des Textes als „ xx-groß “. Stellen Sie danach die Hintergrundfarbe auf „ Aqua “.

CSS

div {

Höhe : 100% ;

Schriftgröße : xx-groß ;

Hintergrundfarbe : Aqua ;

}

In dem unten bereitgestellten Bild können Sie sehen, dass die Hintergrundfarbe angewendet wird:

CSS Eigenschaft background-image

Das ' Hintergrundbild ”-Eigenschaft 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 Eigenschaft background-image lautet:

Hintergrundbild: url()

Geben Sie hier den Pfad des Bildes, das Sie als Hintergrund festlegen möchten, als Argument für „ URL() “.

Beispiel

Fügen Sie in Fortsetzung des vorherigen Beispiels ein Hintergrundbild in das „ div ' Klasse. Wir fügen die URL des Bildes als „ URL(img.jpg) “:

div {

...

Hintergrundbild : URL ( img.jpg ) ;

}

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

Beachten Sie, dass das Bild wiederholt wird. Um dieses Problem zu lösen, sehen Sie sich die nächste Eigenschaft an.

CSS Eigenschaft background-repeat

Wenn Sie ein Bild als Hintergrund auf einer Webseite hinzufügen, wird es standardmäßig wiederholt. Um diese Wiederholung zu vermeiden und das Muster nach Ihrer Wahl einzustellen, muss die „ Hintergrund Wiederholung „Eigentum wird verwertet.

Syntax

Die Syntax der Eigenschaft background-repeat lautet:

Hintergrund Wiederholung : wiederholen | Wiederholung-x | wiederholen-y | keine Wiederholung

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

wiederholen: Es wird verwendet, um das Bild in beiden Richtungen, vertikal und horizontal, zu wiederholen.
Wiederholung-x: Es wird verwendet, um die Wiederholung des Bildes nur horizontal einzustellen.
wiederholen-y: Es gibt die vertikale Wiederholung des Bildes an.
nicht wiederholen: Es wird verwendet, um Wiederholungen des Bildes zu vermeiden.

Beispiel

Hier setzen wir den Wert der Eigenschaft background-repeat als „ keine Wiederholung “:

div {

...

Hintergrund Wiederholung : keine Wiederholung ;

}

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

CSS Eigenschaft background-position

Um die Position des Hintergrundbilds einzustellen, drücken Sie die „ Hintergrund-Position ”-Eigenschaft verwendet wird. Sie können das Bild in verschiedenen Positionen anpassen, z. B. links oben, links mittig, links unten, rechts oben, rechts mittig und viele mehr.

Syntax

Die Syntax der Eigenschaft background-position lautet:

Hintergrund-Position : Wert

Anstelle von ' Wert “, können Sie die Position des Bildes festlegen.

Beispiel

Hier setzen wir die Hintergrundposition als „ Center “:

div {

...

Hintergrund-Position : Center ;

}

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

CSS Eigenschaft background-size

Um die Größe des Hintergrundbildes einzustellen, muss das „ Hintergrundgröße ”-Eigenschaft verwendet wird.

Syntax

Hintergrundgröße hat die folgende Syntax:

Hintergrundgröße : Länge|Abdeckung

Es folgt die Beschreibung der Werte der Eigenschaft background-size:

Länge: Es wird verwendet, um die Breite und Höhe des Hintergrundbilds festzulegen.
Startseite: Es wird verwendet, um das Hintergrundbild im gesamten Hintergrund anzupassen.

Beispiel

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

div {

...

Hintergrundgröße : 100% 80% ;

}

Sie können sehen, dass die Größe des Bildes basierend auf den angegebenen Abmessungen geändert wurde:

CSS Eigenschaft background-origin

Das ' Hintergrund-Herkunft ”-Eigenschaft wird verwendet, um den Positionierungsbereich des Hintergrundbilds anzupassen. Standardmäßig wird das Bild in der oberen linken Ecke angepasst.

Syntax

Die Syntax der Eigenschaft background-origin lautet:

Hintergrund-Herkunft : Polsterbox| Border-Box | Inhaltsfeld

Die Werte der Eigenschaft background-origin werden im Folgenden beschrieben:

Polsterbox: Dies ist der Standardwert der background-origin-Eigenschaft, die verwendet wird, um die Position des Hintergrundbilds entsprechend der Polsterkante anzupassen.
Border-Box: Es wird verwendet, um das Bild entsprechend dem Rahmen des Bildes einzustellen.
Inhaltsbox: Es wird verwendet, um das Hintergrundbild entsprechend dem Inhalt des Bildes einzustellen.

Notiz: Die Eigenschaft background-origin funktioniert nicht, wenn der Wert der Eigenschaft background-attachment auf „ Fest “.

Beispiel

Erstellen Sie zunächst einen Rahmen um den Container. Hier setzen wir das vorherige Beispiel fort und setzen den Padding-Wert auf „ 10px “. Passen Sie danach die Rahmenbreite als „ 15px “, Stil als „ Grat “ und Farbe als „ RGB(1, 68, 68) “. Am Ende werden wir den Wert der Hintergrundursprungseigenschaft zuweisen als „ Inhaltsfeld “:

div {

...

Polsterung : 10px ;

Grenze : 15px Grat rgb ( 1 , 68 , 68 ) ;

Hintergrund-Herkunft : Inhaltsfeld ;

}

Das Ergebnis des oben bereitgestellten Codes ist unten angegeben. Sie können sehen, dass die Position des Bildes entsprechend dem Inhalt des div festgelegt wird:

CSS Eigenschaft background-clip

Das ' Hintergrund-Clip ”-Eigenschaft wirkt sich auf die Hintergrundfarbe des Elements aus. Damit können Sie steuern, wie weit sich eine Hintergrundfarbe über ein Element hinaus erstreckt, z. B. die Füllung des Elements, seinen Rand und seinen Inhalt.

Syntax

Die Syntax der Eigenschaft background-clip lautet:

Hintergrund-Herkunft : Border-Box | Polsterbox | Inhaltsfeld

Die Werte der Eigenschaft background-origin werden im Folgenden beschrieben:

Border-Box: Dies ist der Standardwert der Eigenschaft background-origin, die verwendet wird, um die Hintergrundfarbe hinter dem Rand festzulegen.
Polsterbox: Es wird verwendet, um die Farbe innerhalb der Polsterbox des Elements anzupassen.
Inhaltsbox: Es wird verwendet, um die Hintergrundfarbe entsprechend dem Inhalt des Elements festzulegen.

Beispiel

Wir werden das vorherige Beispiel fortsetzen und den Wert des Rahmenstils auf „ gepunktet “, um die Eigenschaft background-clip zu verstehen. Danach setzen wir den Wert der Eigenschaft background-clip auf „ Polsterbox “:

div {

...

Hintergrund-Clip : Polsterbox ;

}

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

CSS Eigenschaft background-attachment

Das ' Hintergrund-Anhang ”-Eigenschaft wird verwendet, um das Verhalten oder das Bild beim Scrollen der Seite anzupassen. Sein Verhalten kann beim Scrollen mit anderen Elementen eingestellt oder fixiert werden.

Syntax

Die Syntax der Eigenschaft background-attachment lautet:

Hintergrund-Anhang : Wert

Sie können den Wert von background-attachment auf „ Fest ” um das Hintergrundbild zu korrigieren oder “ scrollen “, damit das Bild mit der Seite scrollen kann.

Notiz: Standardmäßig ist der Wert der Eigenschaft background-attachment auf „ scrollen “.

Es ist ersichtlich, dass das hinzugefügte Hintergrundbild nicht statisch ist, wenn wir gescrollt haben. Lassen Sie uns dieses Problem jetzt beheben.

Dazu setzen wir den Wert der Eigenschaft background-attachment auf „ Fest “:

div {

...

Hintergrund-Anhang : Fest ;

}

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

Gehen Sie nun zum Vergleich zwischen Hintergrund- und Hintergrundfarbeneigenschaften.