Heim > Artikel > Web-Frontend > So stellen Sie das Hintergrundbild so ein, dass es in CSS adaptiv zentriert wird
So stellen Sie das Hintergrundbild so ein, dass es in CSS adaptiv zentriert wird
- 王林Original
- 2021-03-09 16:30:055059Durchsuche
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“.
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('smiley.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>
</head>
<body>
<p><b>注意：</b>该属性工作在 Firefox 和 Opera, background-attachment 属性会被设置为 "fixed"。</p>
</body>
</html>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!