Heim > Artikel > Web-Frontend > So legen Sie die adaptive Größe des Hintergrundbilds in CSS fest
So legen Sie die adaptive Größe des Hintergrundbilds in CSS fest
- WBOYOriginal
- 2021-12-03 11:23:0859292Durchsuche
In CSS können Sie das Attribut „background-size“ verwenden, um die adaptive Größe des Hintergrundbilds festzulegen. Dieses Attribut wird verwendet, um die Größe des Hintergrundbilds festzulegen ;"-Stil für das Hintergrundbildelement. Passen Sie die Größe des Hintergrundbilds an.
Die Betriebsumgebung dieses Tutorials: Windows 10-System, CSS3- und HTML5-Version, Dell G3-Computer.
So legen Sie die adaptive Größe des Hintergrundbilds in CSS fest
In CSS können Sie das Attribut „Hintergrundgröße“ verwenden, um die adaptive Größe des Hintergrundbilds festzulegen das Hintergrundbild. Wenn der Wert dieses Attributs cover ist, wird das Seitenverhältnis des Bildes beibehalten und das Bild wird auf die Mindestgröße skaliert, die den Hintergrundpositionierungsbereich vollständig abdeckt.
Lassen Sie uns einen Blick darauf werfen, indem wir das Hintergrundbild der Seite so einstellen, dass es adaptiv ist. Das Beispiel sieht wie folgt aus:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
background-image:url("1118.02.png") ;
background-size:cover;
}
</style>
</head>
<body>
</body>
</html>Ausgabeergebnis:
(Teilen von Lernvideos: CSS-Video-Tutorial)
Das obige ist der detaillierte Inhalt vonSo legen Sie die adaptive Größe des Hintergrundbilds in CSS fest. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!