So verwenden Sie die CSS-Hintergrundpositionseigenschaft

青灯夜游
Freigeben: 2019-05-30 09:21:21
Original
4166 Leute haben es durchsucht

Das Attribut „Hintergrundposition“ wird verwendet, um die Startposition des Hintergrundbilds festzulegen. Die Syntax lautet Hintergrundposition: x y, wobei x die horizontale Position und y die vertikale Position darstellt. Es gibt viele Möglichkeiten, x und y Werte zuzuweisen, zum Beispiel: oben links, 3% 2%, xpos ypos.

So verwenden Sie die CSS-Hintergrundpositionseigenschaft

Wie verwende ich die CSS-Hintergrundpositionseigenschaft?

Das Attribut „Hintergrundposition“ kann die Startposition des Hintergrundbilds festlegen.

Syntax:

background-position: x y
Nach dem Login kopieren

Werte, die eingestellt werden können:


描述
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

Beschreibung: Diese Eigenschaft legt die Position des Hintergrundbilds fest (definiert durch Hintergrundbild). Wenn das Hintergrundbild wiederholt werden soll, beginnt es an dieser Stelle.

Hinweis: Sie müssen die Eigenschaft „background-attachment“ auf „fixed“ setzen, um sicherzustellen, dass diese Eigenschaft in Firefox und Opera ordnungsgemäß funktioniert.

Beispiel für eine CSS-Hintergrundpositionseigenschaft

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<style type="text/css">
body
{ 
  background-image:url(&#39;https://img.php.cn/upload/article/000/005/656/5af270fd37755429.jpg&#39;);
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>
<body>
<body>
<p><b>提示:</b>您需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</html>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die CSS-Hintergrundpositionseigenschaft. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage