Heim > Artikel > Web-Frontend > HTML stellt das Hintergrundbild auf Vollbild ein
HTML stellt das Hintergrundbild auf Vollbild ein
- 藏色散人Original
- 2021-01-18 15:45:3846332Durchsuche
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!