background-origin

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die background-origin-CSS-Eigenschaft legt den Ursprung des Hintergrunds fest: vom Randanfang, innerhalb des Randes oder innerhalb des Paddings.

Probieren Sie es aus

Beachten Sie, dass background-origin ignoriert wird, wenn background-attachment auf fixed gesetzt ist.

Syntax

css
/* Keyword values */
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

/* Global values */
background-origin: inherit;
background-origin: initial;
background-origin: revert;
background-origin: revert-layer;
background-origin: unset;

Die Eigenschaft background-origin wird mit einem der unten aufgelisteten Schlüsselwortwerte angegeben.

Werte

border-box

Der Hintergrund wird relativ zur Border-Box positioniert.

padding-box

Der Hintergrund wird relativ zur Padding-Box positioniert.

content-box

Der Hintergrund wird relativ zur Content-Box positioniert.

Formale Definition

Anfangswertpadding-box
Anwendbar aufalle Elemente. Auch anwendbar auf ::first-letter und ::first-line.
VererbtNein
Berechneter Wertwie angegeben
Animationstypa repeatable list

Formale Syntax

background-origin = 
<visual-box>#

<visual-box> =
content-box |
padding-box |
border-box

Beispiele

Hintergrundursprünge festlegen

css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
css
div {
  background-image:
    url("logo.jpg"), url("main-back.png"); /* Applies two images to the background */
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}

Mit zwei Verläufen arbeiten

In diesem Beispiel hat die Box einen dicken, gepunkteten Rand. Der erste Verlauf verwendet die padding-box als background-origin, und daher liegt der Hintergrund innerhalb des Randes. Der zweite verwendet die content-box und wird somit nur hinter dem Inhalt angezeigt.

css
.box {
  margin: 10px 0;
  color: #fff;
  background:
    linear-gradient(
      90deg,
      rgb(131 58 180 / 100%) 0%,
      rgb(253 29 29 / 60%) 60%,
      rgb(252 176 69 / 100%) 100%
    ),
    radial-gradient(circle, rgb(255 255 255 / 100%) 0%, rgb(0 0 0 / 100%) 28%);
  border: 20px dashed black;
  padding: 20px;
  width: 400px;
  background-origin: padding-box, content-box;
  background-repeat: no-repeat;
}
html
<div class="box">Hello!</div>

Spezifikationen

Specification
CSS Backgrounds and Borders Module Level 3
# the-background-origin

Browser-Kompatibilität

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
background-origin
border-box
content-box
padding-box

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Requires a vendor prefix or different name for use.
Has more compatibility info.

Siehe auch