CSS Eigenschaft background-origin
Beispiel
Lassen Sie das Hintergrundbild in der oberen linken Ecke des Inhalts beginnen:
#example1 {
border: 10px dashed black;
padding:
25px;
background: url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box;
}
Weitere „Probieren Sie es selbst“-Beispiele weiter unten.
Definition und Verwendung
Die background-origin
Eigenschaft gibt die Ursprungsposition (den Hintergrundpositionierungsbereich) eines Hintergrundbilds an.
Hinweis: Diese Eigenschaft hat keine Auswirkung, wenn background-attachment "fixed" ist.
Standardwert: | Polsterbox |
---|---|
Vererbt: | Nein |
Animierbar: | Nein. Lesen Sie mehr über animierbare |
Ausführung: | CSS3 |
JavaScript-Syntax: | Objekt .style.backgroundOrigin="Inhaltsfeld" |
Browser-Unterstützung
Die Zahlen in der Tabelle geben die erste Browserversion an, die die Eigenschaft vollständig unterstützt.
Property | |||||
---|---|---|---|---|---|
background-origin | 4.0 | 9.0 | 4.0 | 3.0 | 10.5 |
CSS-Syntax
background-origin: padding-box|border-box|content-box|initial|inherit;
Eigenschaftswerte
Value | Description | Play it |
---|---|---|
padding-box | Default value. The background image starts from the upper left corner of the padding edge | |
border-box | The background image starts from the upper left corner of the border | |
content-box | The background image starts from the upper left corner of the content | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Mehr Beispiele
Beispiel
Legen Sie zwei Hintergrundbilder für ein <div>-Element fest. Lassen Sie das Hintergrundbild "paper.gif" in der oberen linken Ecke der Polsterkante beginnen und lassen Sie das Hintergrundbild "img_tree.gif" in der oberen linken Ecke des Inhalts beginnen:
#example1 {
border: 10px dashed black;
padding: 25px;
background: url(img_tree.gif), url(paper.gif);
background-repeat: no-repeat;
background-origin:
content-box, padding-box;
}
Verwandte Seiten
CSS-Tutorial: CSS-Hintergründe
HTML-DOM-Referenz: backgroundOrigin-Eigenschaft