Das Attribut „Hintergrundposition“ wird verwendet, um die Startposition des Hintergrundbilds festzulegen. Die Syntax für die Verwendung dieses Attributs lautet „Hintergrundposition: x y;“, wobei der Parameter x die horizontale Position und y darstellt die vertikale Position.
Die Betriebsumgebung dieses Artikels: Windows 7-System, Dell G3-Computer, HTML5- und CSS3-Version.
Das Attribut „Hintergrundposition“ wird verwendet, um die Startposition des Hintergrundbilds festzulegen. Der folgende Artikel stellt Ihnen die Eigenschaft „Hintergrundposition“ vor. Ich hoffe, dass er für Sie hilfreich ist.
CSS-Hintergrundpositionseigenschaft
Funktion: Legen Sie die Startposition des Hintergrundbilds fest.
Beschreibung: Das Attribut „Hintergrundposition“ legt die Position des Hintergrundbilds fest (definiert durch „Hintergrundbild“). Wenn das Hintergrundbild wiederholt werden soll, beginnt es an dieser Stelle .
Syntax:
background-position: x y；
x stellt die horizontale Position dar, y stellt die vertikale Position dar; es gibt viele Möglichkeiten, x und y Werte zuzuweisen Sehen Sie sich die möglichen Werte von x und y an. Wert:
| 值 | 描述 |
|---|---|
| left top left center left bottom right top right center right bottom center top center center center bottom | 如果仅指定一个关键字，其他值将会是"center" |
| x% y% | 第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 。默认值为：0％0％ |
| xpos ypos | 第一个值是水平位置，第二个值是垂直。左上角是0。单位可以是像素（0px0px）或任何其他 CSS单位。如果仅指定了一个值，其他值将是50％。你可以混合使用％和positions |
Hinweis: Das Attribut „background-attachment“ muss auf „fixed“ gesetzt werden, um sicherzustellen, dass dieses Attribut in Firefox und Opera ordnungsgemäß funktioniert.
Beispiel für die Verwendung der CSS-Eigenschaft „Hintergrundposition“
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
body
{
background-image:url('https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center 50px;
}
</style>
</head>
<body>
</body>
</html>Rendering:
Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Studium aller hilfreich sein.
Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Eigenschaft „Hintergrundposition'.. 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)
