Das Attribut „background-origin“ wird verwendet, um den Positionierungsbereich des Hintergrundbilds festzulegen. Es verfügt über drei Werte, die die Positionierung relativ zum Füllfeld, die Positionierung relativ zum Randfeld und die Positionierung relativ zu angeben das Inhaltsfeld.
CSS3-Hintergrundursprungsattribut
Funktion: Gibt den Positionierungsbereich des Hintergrundbilds an .
Beschreibung: Legen Sie den Referenzursprung (Position) des Hintergrundbilds des Objekts fest oder rufen Sie ihn ab, wenn Sie berechnen.
Syntax:
background-origin: padding-box|border-box|content-box;
padding-box: Das Hintergrundbild wird relativ zur Padding-Box positioniert.
border-box: Das Hintergrundbild wird relativ zum Border-Box positioniert.
Inhaltsfeld: Das Hintergrundbild wird relativ zum Inhaltsfeld positioniert.
Verwendungsbeispiel des CSS3-Hintergrundursprungsattributs
<!DOCTYPE html>
<html>
<head>
<style>
div
{
border:1px solid black;
padding:35px;
background-image:url('https://img.php.cn/upload/article/000/000/024/5c513adf97e86533.jpg');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
</style>
</head>
<body>
<p>background-origin:border-box:</p>
<div id="div1">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
<p>background-origin:content-box:</p>
<div id="div2">
这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
</div>
</body>
</html>Rendering:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein. Weitere spannende Inhalte finden Sie in den entsprechenden Tutorial-Kolumnen auf der chinesischen PHP-Website! ! !
Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Attribut „background-origin'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
