Heim > Artikel > Web-Frontend > So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt
So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt
- 藏色散人Original
- 2021-04-09 09:31:014047Durchsuche
So stellen Sie ein, dass der Hintergrund in CSS unverändert bleibt: Erstellen Sie zunächst eine HTML-Beispieldatei. Geben Sie dann den Head-Tag und den CSS-Style-Tag-Code ein. Geben Sie dann zwischen den Style-Tags den Code ein, der das Hintergrundbild der Webseite definiert. Schließlich reicht es aus, das Attribut „background-repeat:no -repeat“ festzulegen.
Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.
Zuerst öffnen wir das System-Notizblockprogramm und geben den Basiscode der Webseite ein
<html> <body> </body> </html>
Dann geben wir den Head-Tag und den CSS-Style-Tag-Code ein
<head> <style type="text/css"> </style> </head>
Klicken Sie zwischen den Style-Tags und geben Sie den Code ein Definiert das Hintergrundbild der Webseite
body
{
background-image:url('d:/bg.gif');
} 
Dann geben Sie einige Body-Tags und Inhalte unter dem Body-Tag ein
<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>
Klicken Sie auf die Datei und speichern Sie sie unter dem Befehl, speichern Sie den Inhalt im HTML-Format und öffnen Sie die Webseite Vorschau.
Jeder hat festgestellt, dass in dieser Situation beim Scrollen mit dem Mausrad gleichzeitig der Inhalt der Webseite und das Hintergrundbild gescrollt werden. Zur einfacheren Anzeige ändern wir den Code so, dass das Bild nicht wiederholt angezeigt wird.
<style type="text/css">
body
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
}
</style>Dann sehen Sie sich den Effekt in der Vorschau an.
Auf diese Weise können Sie die Änderung des Hintergrundbilds deutlich sehen. Um das Hintergrundbild zu korrigieren, ändern wir den Code in
<style type="text/css">
body
{
background-image:url(d:/bg.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>und sehen den Effekt.
【Empfohlenes Lernen: CSS-Video-Tutorial】
Das obige ist der detaillierte Inhalt vonSo stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!