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 ⁨Juli 2015⁩.

Die background-origin CSS Eigenschaft legt den Ursprung des Hintergrundes fest: vom Anfang des Rands, innerhalb des Rands oder innerhalb des Abstands.

Probieren Sie es aus

background-origin: border-box; background-repeat: no-repeat;

background-origin: padding-box; background-repeat: no-repeat;

background-origin: content-box; background-repeat: no-repeat;

<section id="default-example"> <div id="example-element">This is the content of the element.</div> </section>

#example-element { background-image: url("/shared-assets/images/examples/leopard.jpg"); color: #d73611; text-shadow: 2px 2px black; padding: 20px; border: 10px dashed #333333; font-size: 2em; font-weight: bold; }

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 background-origin Eigenschaft wird als eines der unten aufgeführten Schlüsselwortwerte angegeben.

Werte

border-box: Der Hintergrund wird relativ zur Randbox positioniert.
padding-box: Der Hintergrund wird relativ zur Abstandsbox positioniert. Standardwert.
content-box: Der Hintergrund wird relativ zur Inhaltsbox positioniert.

Formale Definition

Anfangswert	`padding-box`
Anwendbar auf	alle Elemente. Auch anwendbar auf `::first-letter` und `::first-line`.
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	a 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; }

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

css

.box { margin: 10px 0; color: white; 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, white 0%, black 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 # background-origin

Browser-Kompatibilität

Siehe auch

background-clip

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden