Bei der Entwicklung von Front-End-Seiten gibt es zwei Möglichkeiten, Bilder anzuzeigen: Das IMG-Tag zeigt Bilder an und das Hintergrundattribut wird so eingestellt, dass Hintergrundbilder angezeigt werden. Wir wissen, dass IMG-Bilder zentriert werden können. Können also auch Hintergrundbilder zentriert werden? Wie zentriere ich das Hintergrundbild? In diesem Artikel erfahren Sie, wie Sie das Hintergrundbild in CSS zentrieren. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.
Lassen Sie uns zunächst einen Blick darauf werfen, wie man das Hintergrundbild mithilfe von CSS im Browser zentriert.
Tatsächlich ist es sehr einfach, das Hintergrundpositionsattribut in CSS zu verwenden, um die horizontale und vertikale Mittelausrichtung des Hintergrundbilds zu erreichen. Das Positionsattribut legt den Hintergrund fest. Das Bild wird in der Mitte angezeigt.
Wir verwenden zunächst das Hintergrundattribut, um das Hintergrundbild anzuzeigen:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>背景图片居中</title>
<style>
*{margin: 0;padding:0;}
.demo{
width: 400px;
height: 300px;
margin: 50px auto;
border: 1px dashed #000;
background-image:url(Wie zentriere ich das Hintergrundbild in CSS? Einführung in die Methode zum Zentrieren des Hintergrundbilds (Codebeispiel)) ;
background-size:200px 160px ;
background-repeat:no-repeat ;
}
</style>
</head>
<body>
<div class="demo">
</div>
</body>
</html>Rendering:
Als nächstes schauen wir uns die Hintergrundposition an Attributeinstellungen:
1. Hintergrundposition verwendet Pixel, um das Hintergrundbild zu zentrieren (Größe des Hintergrundbilds kennen)
Im Beispiel stimmt die untere rechte Ecke des Hintergrundbilds mit überein Um den Hintergrund zu zentrieren, müssen Sie die Mitte des Hintergrundbilds mit der Mitte der Demobox übereinstimmen. Sie müssen das Hintergrundbild um die Hälfte nach unten und um die Hälfte verschieben die Breite nach rechts. Daher können Sie durch Hinzufügen des folgenden Codes zum CSS das Hintergrundbild zentrieren
background-position:100px 70px ; /*宽的一半，高的一半*/
Rendern:
2. Verwenden Sie 50 für den Hintergrund. position % Stellen Sie das Hintergrundbild so ein, dass es zentriert wird, was sehr praktisch ist
background-position:50% 50% ;
3. background-position Verwenden Sie „center“, um das Hintergrundbild so einzustellen, dass es zentriert wird, was sehr praktisch ist. (Das zweite Zentrum kann weggelassen werden)
background-position:center center;
Die oben genannten drei Einstellungsmethoden für die Hintergrundposition können alle die Zentrierung des Hintergrundbilds erreichen. Der erste Wert des Attributs „Hintergrundposition“ legt die horizontale Position fest und der zweite A-Wert legt die vertikale Position fest; Sie können je nach Situation entscheiden, welche Methode Sie verwenden möchten. Ich hoffe, dass es für alle beim Lernen hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter CSS3-Video-Tutorial , Html5-Video-Tutorial , Bootstrap-Video-Tutorial !
【Empfohlene verwandte Artikel】
Das obige ist der detaillierte Inhalt vonWie zentriere ich das Hintergrundbild in CSS? Einführung in die Methode zum Zentrieren des Hintergrundbilds (Codebeispiel). 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)
