CSS3 Hintergrund
CSS3 enthält ein paar neue Hintergrundeigenschaften, die eine bessere Kontrolle des Hintergrundelements ermöglichen.
In diesem Kapitel erfahren Sie, wie Sie mehrere Hintergrundbilder zu einem Element hinzuzufügen.
Sie werden auch über die folgenden neuen CSS3-Eigenschaften erfahren:
-
background-size -
background-origin -
background-clip
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
Zahlen , gefolgt von -webkit-, -moz- oder -o- die erste Version an , die mit einem Präfix gearbeitet.
| Eigentum | |||||
|---|---|---|---|---|---|
| background-image (with multiple backgrounds) |
4.0 | 9.0 | 3.6 | 3.1 | 11.5 |
| background-size | 4.0 1.0 -webkit- |
9.0 | 4.0 3.6 -moz- |
4.1 3.0 -webkit- |
10.5 10.0 -o- |
| background-origin | 1.0 | 9.0 | 4.0 | 3.0 | 10.5 |
| background-clip | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS3 Mehrere Hintergründe
CSS3 ermöglicht es Ihnen , mehrere Hintergrundbilder für ein Element, durch das hinzufügen background-image Eigenschaft.
Die verschiedenen Hintergrundbilder werden durch Komma getrennt, und die Bilder werden auf aufeinander gestapelt, wobei das erste Bild dem Betrachter am nächsten ist.
Das folgende Beispiel hat zwei Hintergrundbilder, das erste Bild ist eine Blume (nach unten ausgerichtet und rechts) und das zweite Bild ist ein Papierhintergrund (ausgerichtet auf die linke obere Ecke):
Beispiel
#example1 {
background-image: url(img_flwr.gif), url(paper.gif);
background-position: right bottom, left top;
background-repeat: no-repeat, repeat;
} Versuch es selber " Mehrere Hintergrundbilder können entweder die einzelnen Hintergrundeigenschaften (wie oben) oder die Verwendung von angegebenen background Kurzschrift - Eigenschaft.
Im folgenden Beispiel wird die background - Eigenschaft (gleiche Ergebnis wie obiges Beispiel):
Beispiel
#example1 {
background: url(img_flwr.gif) right bottom
no-repeat, url(paper.gif) left top repeat;
} Versuch es selber " CSS3 Hintergrund Größe
Die CSS3 background-size - Eigenschaft können Sie die Größe von Hintergrundbildern zu spezifizieren.
Bevor CSS3, war die Größe eines Hintergrundbildes die tatsächliche Größe des Bildes. CSS3 ermöglicht es uns, Hintergrund-Bilder wiederverwenden in unterschiedlichen Kontexten.
Die Größe kann in Längen angegeben werden, Prozentsätze oder durch eine der beiden Schlüsselwörter: enthalten oder Abdeckung.
Im folgenden Beispiel wird die Größe ein Hintergrundbild zu viel kleiner als das Originalbild (mit Pixel):
Original-Hintergrundbild:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Resized Hintergrundbild:
Lorem Ipsum Dolor
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Hier ist der Code:
Beispiel
#div1
{
background: url(img_flower.jpg);
background-size: 100px 80px;
background-repeat: no-repeat;
}
Versuch es selber " Die beiden anderen möglichen Werte für background-size sind contain und cover .
Die contain Schlüsselwort skaliert das Bild Hintergrund so groß wie möglich sein (aber sowohl seine Breite und Höhe innerhalb des Content - Bereich passen müssen). Als solche, abhängig von den Proportionen des Hintergrundbildes und der Hintergrund Positionierbereich kann es einige Bereiche des Hintergrundes sein, die durch das Hintergrundbild nicht abgedeckt sind.
Die cover Schlüsselwort skaliert das Hintergrundbild , so dass der Inhalt vollständig durch das Hintergrundbild bedeckt ist (sowohl seine Breite und Höhe sind gleich oder den Inhaltsbereich überschreiten). Als solche im Hintergrund Positionierung Bereich einige Teile des Hintergrundbildes möglicherweise nicht sichtbar.
Das folgende Beispiel zeigt die Verwendung contain und 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;
}
Versuch es selber " Definieren Größen von mehreren Hintergrundbildern
Die background-size Eigenschaft akzeptiert auch mehrere Werte für die Hintergrundgröße (eine durch Kommata getrennte Liste verwenden), wenn Sie mit mehreren Hintergründen arbeiten.
Das folgende Beispiel hat drei Hintergrundbilder angegeben, mit verschiedenen background-size - Wert für jedes Bild:
Beispiel
#example1 {
background: url(img_flwr.gif) left top
no-repeat, url(img_flwr.gif) right bottom no-repeat, url(paper.gif) left top
repeat;
background-size: 50px, 130px, auto;
} Versuch es selber " Full Size Hintergrundbild
Jetzt wollen wir auf einer Website ein Hintergrundbild zu haben, die das gesamte Browser-Fenster jederzeit abdeckt.
Die Anforderungen sind wie folgt:
- Füllen Sie die gesamte Seite mit dem Bild (kein Leerraum)
- Bild skalieren nach Bedarf
- -Center Bild auf Seite
- Nicht Scrollbalken verursachen
Das folgende Beispiel zeigt, wie es zu tun; Verwenden Sie das HTML-Element (das HTML-Element ist immer zumindest die Höhe des Browserfensters). Dann stellen Sie eine feste und zentriert Hintergrund auf ihm. Dann passen Sie seine Größe mit dem background-size Eigenschaft:
Beispiel
html {
background: url(img_flower.jpg) no-repeat
center fixed;
background-size: cover;
} Versuch es selber " CSS3 background-origin der Immobilie
Die CSS3 background-origin Eigenschaft gibt an, wo das Hintergrundbild positioniert ist.
Die Eigenschaft nimmt drei verschiedene Werte:
- border-box - das Hintergrundbild geht von der oberen linken Ecke der Grenze
- padding-box - (default) das Hintergrundbild geht von der oberen linken Ecke des Polsterkante
- content-box - das Hintergrundbild beginnt von der oberen linken Ecke des Inhalts
Das folgende Beispiel zeigt die background-origin Eigenschaft:
Beispiel
#example1
{
border: 10px solid black;
padding: 35px;
background: url(img_flwr.gif);
background-repeat: no-repeat;
background-origin: content-box;
}
Versuch es selber " CSS3 background-clip Property
Die CSS3 background-clip - Eigenschaft gibt die Malerei Bereich des Hintergrundes.
Die Eigenschaft nimmt drei verschiedene Werte:
- border-box - (default) ist der Hintergrund für die Außenkante der Grenze gemalt
- padding-box - ist der Hintergrund für die Außenkante der Polsterung gemalt
- content-box - der Hintergrund ist innerhalb des Content - Box gemalt
Das folgende Beispiel zeigt die background-clip - Eigenschaft:
Beispiel
#example1
{
border: 10px dotted black;
padding: 35px;
background: yellow;
background-clip: content-box;
}
Versuch es selber " Testen Sie sich mit Übungen!
Übung 1 » Übung 2» Übung 3 » Übung 4» Übung 5 »
CSS3 Hintergrundeigenschaften
| Eigentum | Beschreibung |
|---|---|
| background | Eine zusammenfassende Eigenschaft für die Einstellung alle Hintergrundeigenschaften in einer Erklärung |
| background-clip | Gibt die Malerei Bereich des Hintergrund |
| background-image | Gibt eine oder mehrere Hintergrundbilder für ein Element |
| background-origin | Gibt an, wo das Hintergrundbild (e) ist / positioniert sind |
| background-size | Gibt die Größe des Hintergrundbildes (n) |