Beispiel
Stellen Sie unterschiedliche Hintergrundeigenschaften in einer Erklärung:
body
{
background: #00ff00 url("smiley.gif") no-repeat fixed center;
}
Versuch es selber " Definition und Verwendung
Der Hintergrund Kurzschrift-Eigenschaft legt alle Hintergrundeigenschaften in einer Erklärung.
Die Eigenschaften, die eingestellt werden können, sind: Hintergrundfarbe, Hintergrund-Bild, Hintergrund-Position, Hintergrund-Größe, background-repeat, Hintergrund-Herkunft, Hintergrund-Clip und background-attachment.
Dabei spielt es keine Rolle , ob einer der oben genannten Werte fehlen, zB Hintergrund: # ff0000 url(smiley.gif) ; ist erlaubt.
| Standardwert: | see individual properties |
|---|---|
| Vererbt: | no |
| Anima: | yes, see individual properties . Read about animatable Try it |
| Version: | CSS1 + new properties in CSS3 |
| JavaScript-Syntax: | object .style.background="red url(smiley.gif) top left no-repeat" Try it |
Browser-Unterstützung
Die Zahlen in der Tabelle geben Sie die erste Browser-Version, die die Eigenschaft vollständig unterstützt.
| Eigentum | |||||
|---|---|---|---|---|---|
| background | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Note: Internet Explorer 8 und früheren Versionen nicht mehrere Hintergrundbilder auf einem Element zu unterstützen.
Hinweis: Siehe die einzelnen Browser - Unterstützung für jeden unter Wert.
CSS-Syntax
background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;Hinweis: Wenn eine der Eigenschaften in der Stenografie Erklärung ist die bg-Size - Eigenschaft, müssen Sie eine / verwenden (slash) aus der bg-Eigenschaft position zu trennen, zB background:url(smiley.gif) 10px 20px / 50px 50px ; führen wird in einem Hintergrundbild, positioniert 10 Pixel von links, 20 Pixel von oben, und die Größe des Bildes 50 Pixel breit und 50 Pixel hoch sein.
Hinweis: Wenn mehrere Hintergrund-Bildquellen , sondern wollen auch eine Hintergrundfarbe, die Hintergrund-Farbparameter muss in der Liste zuletzt zu sein.
Eigenschaftswerte
| Wert | Beschreibung | CSS |
|---|---|---|
| background-color | Gibt die Hintergrundfarbe verwendet werden | 1 |
| background-image | Gibt eine oder mehrere Hintergrundbilder verwendet werden, | 1 |
| background-position | Gibt die Position der Hintergrundbilder | 1 |
| background-size | Gibt die Größe der Hintergrundbilder | 3 |
| background-repeat | Gibt an, wie die Hintergrundbilder zu wiederholen | 1 |
| background-origin | Gibt die Positionierung Bereich der Hintergrundbilder | 3 |
| background-clip | Gibt die Malfläche der Hintergrundbilder | 3 |
| background-attachment | Gibt an, ob die Hintergrundbilder festgelegt sind oder scrollt mit dem Rest der Seite | 1 |
| Initiale | Setzt diese Eigenschaft auf den Standardwert. Lesen Sie mehr über Anfangs | 3 |
| erben | Erbt diese Eigenschaft von seinem übergeordneten Element. Lesen Sie mehr über erben | 2 |
Verwandte Seiten
CSS Tutorial: CSS Hintergrund
CSS3 Tutorial: CSS3 Hintergrund
HTML - DOM - Referenz: background property