Heim > Artikel > Web-Frontend > HTML stellt das Hintergrundbild auf Vollbild ein
So stellen Sie das Hintergrundbild im HTML-Format ein: Erstellen Sie zunächst ein neues HTML-Dokument. Fügen Sie dann das Hintergrundbild im selben Ordner hinzu „background-repeat“-Attribute Stellen Sie es einfach auf Vollbild ein.
Demonstrationsumgebung für dieses Tutorial: Acer S40-51-Computer, Windows 10 Home chinesisches Versionssystem, HTML5&&CSS3&&HBuilder. Erstellen Sie ein neues HTML-Dokument.
2. Fügen Sie 080b747a20f9163200dd0a7d304ba388531ac245ce3e4fe3d50054a55f265927 hinzu.
Da der Hintergrund auf dem Hauptkörper festgelegt ist, muss er als Körper{} definiert werden.background-image:url(图片),这个是添加图片的意思。3. Dann müssen wir „background-repeat:repeat-x“ hinzufügen. Zu diesem Zeitpunkt wird es horizontal gekachelt.
background-repeat:no-repeat;这样就可以不重复平铺。 background-repeat:repeat-y;这个指令是纵向平铺。 background-repeat:repeat;这样则是全屏平铺。Vollständiger Beispielcode:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>html设置背景图片全屏</title> <style type="text/css"> body{ background-image: url(1.jpg); /*background-repeat属性定义了图像的平铺模式*/ /* background-repeat: repeat; */ /*默认值,背景图像将在垂直方向和水平方向重复,即全屏平铺*/ background-repeat: no-repeat; /*这个时候就会不重复平铺*/ background-repeat: repeat-y; /*背景图像将在垂直方向重复。*/ background-repeat: repeat-x; /*背景图像将在水平方向重复。*/ /* background-size:100%; */ /* 指定背景图片大小 */ background-attachment: fixed; /* 设置背景图像是否固定或者随着页面的其余部分滚动。 */ } </style> </head> <body> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> <p>背景图片!</p><p>背景图片!</p> </body> </html>Vollbildeffekt wie:
Das obige ist der detaillierte Inhalt vonHTML stellt das Hintergrundbild auf Vollbild ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!