HTML stellt das Hintergrundbild auf Vollbild ein-HTML-Tutorial-php.cn

HTML stellt das Hintergrundbild auf Vollbild ein

藏色散人

Freigeben： 2021-01-26 17:46:50

Original

46354 Leute haben es durchsucht

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.

Legen Sie den HTML-Frame fest und legen Sie dann die Bilder im selben Ordner fest.

2. Fügen Sie hinzu.

Da der Hintergrund auf dem Hauptkörper festgelegt ist, muss er als Körper{} definiert werden.

background-image:url(图片)，这个是添加图片的意思。

Nach dem Login kopieren

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;这样则是全屏平铺。

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!