Die CSS-Hintergrundeigenschaften werden verwendet, um die Hintergrundeffekte für Elemente zu definieren.
CSS Hintergrund Eigenschaften:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
Hintergrundfarbe
Die background-color Eigenschaft gibt die Hintergrundfarbe eines Elements.
Die Hintergrundfarbe einer Seite wird wie folgt festgelegt:
Mit CSS wird eine Farbe am häufigsten angegeben durch:
- ein gültiger Farbbezeichnung - wie "red"
- ein HEX - Wert - wie "#ff0000"
- ein RGB - Wert - wie "rgb(255,0,0)"
Schauen Sie sich CSS Farbwerte für eine vollständige Liste der möglichen Farbwerte.
Im Beispiel unten, das <h1>, <p> und <div> Elemente unterschiedliche Hintergrundfarben haben:
Beispiel
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
} Versuch es selber " Hintergrundbild
Der background-image - Eigenschaft gibt ein Bild als Hintergrund eines Elements zu verwenden.
Standardmäßig wird das Bild wiederholt, so dass es das gesamte Element abdeckt.
Das Hintergrundbild für eine Seite kann wie folgt festgelegt werden:
Unten ist ein Beispiel für eine schlechte Kombination von Text und Hintergrundbild. Der Text ist kaum lesbar:
 | Hinweis: Wenn Sie ein Hintergrundbild verwenden, um ein Bild verwenden , die den Text nicht stören. |
|---|
Hintergrundbild - Wiederholung horizontal oder vertikal
Standardmäßig ist der background-image wiederholt Eigenschaft ein Bild sowohl horizontal als auch vertikal.
Einige Bilder sollten nur horizontal oder vertikal wiederholt werden, oder sie werden seltsam aussehen, wie folgt aus:
Wenn das obige Bild nur horizontal wiederholt ( background-repeat: repeat-x; ), wird der Hintergrund besser aussehen:
Beispiel
body
{
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
Versuch es selber " | Hinweis: Ein Bild vertikal einstellen zu wiederholen background-repeat: repeat-y; |
|---|
Hintergrundbild - Setzt die Position und no-repeat
Es werden das Hintergrundbild nur einmal auch durch die angegeben wird background-repeat Eigenschaft:
Beispiel
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
}
Versuch es selber " In dem obigen Beispiel wird das Hintergrundbild in der gleichen Stelle wie der Text angezeigt. Wir wollen die Position des Bildes zu verändern, so dass sie den Text nicht zu sehr stören.
Die Position des Bildes wird durch die Angabe background-position Eigenschaft:
Beispiel
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
Versuch es selber " Hintergrundbild - Feststellung
Um festzulegen , dass das Hintergrundbild sollte festgelegt werden (wird nicht mit dem Rest der Seite scrollen), verwenden Sie die background-attachment Eigenschaft:
Beispiel
body
{
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
}
Versuch es selber " Background - Stenografie Eigenschaft
Um den Code zu verkürzen, ist es auch möglich, alle Hintergrundeigenschaften in einer einzigen Eigenschaft angeben. Dies ist eine Kurzschrift-Eigenschaft genannt.
Die zusammenfassende Eigenschaft für Hintergrund ist background :
Wenn die Kurzschrift-Eigenschaft mit der Reihenfolge der Eigenschaftswerte ist:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position
Dabei spielt es keine Rolle, ob einer der Eigenschaftswerte fehlen, solange die anderen in dieser Reihenfolge sind.
Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
Alle CSS-Hintergrundeigenschaften
| Eigentum | Beschreibung |
|---|---|
| background | Setzt alle Hintergrundeigenschaften in einer Erklärung |
| background-attachment | Legt fest, ob ein Hintergrundbild festgelegt ist oder rollt mit dem Rest der Seite |
| background-color | Legt die Hintergrundfarbe eines Elements |
| background-image | Legt das Hintergrundbild für ein Element |
| background-position | Stellt die Anfangsposition eines Hintergrundbildes |
| background-repeat | Legt fest, wie ein Hintergrundbild wird wiederholt |