DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Die `background-origin`-Eigenschaft definiert, wo der Hintergrund gezeichnet werden soll: über das gesamte Element, innerhalb des Rahmens oder innerhalb des Abstands.
Es gibt vier Werte: `border-box`, `padding-box`, `content-box` und `inherit`. Hier ist eine Demo
background-origin ähnelt background-clip, mit dem Unterschied, dass es den Hintergrund skaliert, anstatt ihn zuzuschneiden.
Das obige Beispiel hat auch `background-size: cover` und `background-repeat: no-repeat` angewendet. Wenn dies nicht der Fall wäre, würde sich das Bild unter dem Rahmen oder dem Abstand wiederholen.
Browser-Unterstützung
| IE | Edge | Chrome | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| 9+ | Alle | Alle | 4+ | Alle | 11.5+ |
| iOS Safari | Chrome Android | Firefox Android | Android Browser | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | 4.1+ | Alle |
Weitere Informationen
Verwandte Eigenschaften
background
.element { background: url(texture.svg) top center / 200px 200px no-repeat fixed #f8a100; }
background-attachment
.hero { background-attachment: fixed; }
background-blend-mode
.element { background-blend-mode: screen; }
background-clip
.element { background-clip: padding-box; }
background-color
element{ background-color: #ff7a18; }
background-image
.element { background: url(texture.svg); }
background-position
.element { background-position: 100px 5px; }
background-repeat
.element { background-repeat: repeat-x; }
background-size
.element { background-size: 300px 100px; }
Wow! Das ist gut.
Der Standardwert für `background-origin` ist `padding-box`.