Heim  >  Artikel  >  Web-Frontend  >  HTML stellt das Hintergrundbild auf Vollbild ein

HTML stellt das Hintergrundbild auf Vollbild ein

藏色散人
藏色散人Original
2021-01-18 15:45:3846297Durchsuche

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 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn