So stellen Sie das Hintergrundbild so ein, dass es in CSS adaptiv zentriert wird-CSS-Tutorial-php.cn

So stellen Sie das Hintergrundbild so ein, dass es in CSS adaptiv zentriert wird

王林

Freigeben： 2023-01-03 09:28:44

Original

5045 Leute haben es durchsucht

So legen Sie die adaptive Zentrierung von Hintergrundbildern in CSS fest: Sie können sie mit Hilfe des Attributs „background-position“ festlegen, z. B. [background-position:center;], der Attributwert „center“ bedeutet „Zentrierung“.

So stellen Sie das Hintergrundbild so ein, dass es in CSS adaptiv zentriert wird

Die Betriebsumgebung dieses Artikels: Windows 10-System, CSS 3, Thinkpad T480-Computer.

Attributeinführung:

Wenn wir in CSS möchten, dass ein Bild vertikal in der Mitte angezeigt wird, können wir dies mit dem Attribut „Hintergrundposition“ erreichen.

Attributeinführung:

Hintergrundpositionsattribut legt die Startposition des Hintergrundbilds fest.

Wenn wir beispielsweise ein lokales Bild als Hintergrund verwenden und es zentrieren möchten, können wir Folgendes tun:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
body
{ 
	background-image:url(&#39;smiley.gif&#39;);
	background-repeat:no-repeat;
	background-attachment:fixed;
	background-position:center; 
}
</style>
</head>

<body>
<p><b>注意：</b>该属性工作在 Firefox 和 Opera, background-attachment 属性会被设置为 "fixed"。</p>
</body>
</html>

Nach dem Login kopieren

Verwandte Empfehlungen: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo stellen Sie das Hintergrundbild so ein, dass es in CSS adaptiv zentriert wird. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!