So verwenden Sie die Eigenschaft „Hintergrundposition'.-CSS-Tutorial-php.cn

So verwenden Sie die Eigenschaft „Hintergrundposition'.

青灯夜游

Freigeben： 2021-04-22 15:55:33

Original

22527 Leute haben es durchsucht

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.

So verwenden Sie die Eigenschaft „Hintergrundposition'.

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；

Nach dem Login kopieren

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(&#39;https://img.php.cn/upload/article/000/000/024/5c6a4428ea867709.png&#39;);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center 50px; 
}
</style>
</head>

<body>

</body>
</html>

Nach dem Login kopieren

Rendering:

So verwenden Sie die Eigenschaft „Hintergrundposition.

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!