CSS Mehrere Hintergründe
In diesem Kapitel erfahren Sie, wie Sie einem Element mehrere Hintergrundbilder hinzufügen.
Außerdem lernen Sie folgende Eigenschaften kennen:
background-sizebackground-originbackground-clip
CSS Mehrere Hintergründe
background-imageMit CSS können Sie über die Eigenschaft mehrere Hintergrundbilder für ein Element hinzufügen
.
Die verschiedenen Hintergrundbilder werden durch Kommas getrennt und die Bilder übereinander gestapelt, wobei das erste Bild dem Betrachter am nächsten ist.
Das folgende Beispiel hat zwei Hintergrundbilder, das erste Bild ist eine Blume (unten und rechts ausgerichtet) und das zweite Bild ist ein Papierhintergrund (links oben ausgerichtet):
Beispiel
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
}
Mehrere Hintergrundbilder können entweder mit den einzelnen Hintergrundeigenschaften (wie oben) oder mit der backgroundKurzschrifteigenschaft angegeben werden.
Im folgenden Beispiel wird die backgroundKurzschrifteigenschaft verwendet (gleiches Ergebnis wie im obigen Beispiel):
Beispiel
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
}
CSS-Hintergrundgröße
Mit der CSS- background-sizeEigenschaft können Sie die Größe von Hintergrundbildern festlegen.
Die Größe kann in Längen, Prozentsätzen oder mit einem der beiden Schlüsselwörter „contain“ oder „cover“ angegeben werden.
Das folgende Beispiel ändert die Größe eines Hintergrundbilds auf viel kleiner als das Originalbild (unter Verwendung von Pixeln):
Danke ihm für den Schmerz
Der Schmerz selbst ist die Liebe
Deshalb kommt es auf die Geringsten an, die unsere normale Praxis erträgt, um die Konsequenzen zu nutzen
Hier ist der Code:
Beispiel
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Die beiden anderen möglichen Werte für background-sizesind contain
und cover.
Das containSchlüsselwort skaliert das Hintergrundbild so groß wie möglich (aber sowohl seine Breite als auch seine Höhe müssen in den Inhaltsbereich passen). Daher kann es abhängig von den Proportionen des Hintergrundbilds und des Hintergrundpositionierungsbereichs einige Bereiche des Hintergrunds geben, die nicht durch das Hintergrundbild abgedeckt sind.
Das coverSchlüsselwort skaliert das Hintergrundbild so, dass der Inhaltsbereich vollständig vom Hintergrundbild abgedeckt wird (sowohl Breite als auch Höhe entsprechen dem Inhaltsbereich oder überschreiten diesen). Daher sind einige Teile des Hintergrundbilds möglicherweise nicht im Hintergrundpositionierungsbereich sichtbar.
Das folgende Beispiel veranschaulicht die Verwendung von containund cover:
Beispiel
#div1
{
background: url(img_flower.jpg);
background-size: contain;
background-repeat: no-repeat;
}
#div2
{
background: url(img_flower.jpg);
background-size: cover;
background-repeat: no-repeat;
}
Definieren Sie die Größe mehrerer Hintergrundbilder
Die background-sizeEigenschaft akzeptiert auch mehrere Werte für die Hintergrundgröße (unter Verwendung einer durch Kommas getrennten Liste), wenn mit mehreren Hintergründen gearbeitet wird.
Im folgenden Beispiel sind drei Hintergrundbilder mit unterschiedlichen Werten für die Hintergrundgröße für jedes Bild angegeben:
Beispiel
#example1 {
background: url(img_tree.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
}
Hintergrundbild in voller Größe
Jetzt wollen wir ein Hintergrundbild auf einer Website haben, das jederzeit das gesamte Browserfenster abdeckt.
Die Anforderungen sind wie folgt:
- Füllen Sie die gesamte Seite mit dem Bild (kein Leerraum)
- Bild nach Bedarf skalieren
- Bild auf Seite zentrieren
- Verursachen Sie keine Bildlaufleisten
Das folgende Beispiel zeigt, wie es geht; Verwenden Sie das <html>-Element (das <html>-Element ist immer mindestens so hoch wie das Browserfenster). Setzen Sie dann einen festen und zentrierten Hintergrund darauf. Passen Sie dann die Größe mit der Eigenschaft background-size an:
Beispiel
html {
background: url(img_man.jpg) no-repeat
center fixed;
background-size: cover;
}
Heldenbild
Sie können auch verschiedene Hintergrundeigenschaften für ein <div> verwenden, um ein Hero-Bild (ein großes Bild mit Text) zu erstellen und es an der gewünschten Stelle zu platzieren.
Beispiel
.hero-image {
background: url(img_man.jpg) no-repeat center;
background-size: cover;
height: 500px;
position:
relative;
}
CSS Eigenschaft background-origin
Die CSS background-origin-Eigenschaft gibt an, wo das Hintergrundbild positioniert wird.
Die Eigenschaft nimmt drei verschiedene Werte an:
- border-box - das Hintergrundbild beginnt in der oberen linken Ecke des Rahmens
- padding-box - (Standard) Das Hintergrundbild beginnt in der oberen linken Ecke der Polsterkante
- content-box - das Hintergrundbild beginnt in der oberen linken Ecke des Inhalts
Das folgende Beispiel veranschaulicht die background-originEigenschaft:
Beispiel
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
CSS Eigenschaft background-clip
Die CSS- background-clipEigenschaft gibt den Malbereich des Hintergrunds an.
Die Eigenschaft nimmt drei verschiedene Werte an:
- border-box - (Standard) Der Hintergrund wird bis zum äußeren Rand des Rahmens gemalt
- padding-box - der Hintergrund wird auf die Außenkante der Polsterung gemalt
- content-box - der Hintergrund wird innerhalb der Inhaltsbox gemalt
Das folgende Beispiel veranschaulicht die background-clipEigenschaft:
Beispiel
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Erweiterte CSS-Hintergrundeigenschaften
| Property | Description |
|---|---|
| background | A shorthand property for setting all the background properties in one declaration |
| background-clip | Specifies the painting area of the background |
| background-image | Specifies one or more background images for an element |
| background-origin | Specifies where the background image(s) is/are positioned |
| background-size | Specifies the size of the background image(s) |