So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt-CSS-Tutorial-php.cn

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

藏色散人

Freigeben： 2023-01-04 09:35:31

Original

4139 Leute haben es durchsucht

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.

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

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>

Nach dem Login kopieren

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

Dann geben wir den Head-Tag und den CSS-Style-Tag-Code ein

<head>
  <style type="text/css">
  </style>
</head>

Nach dem Login kopieren

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

Klicken Sie zwischen den Style-Tags und geben Sie den Code ein Definiert das Hintergrundbild der Webseite

body
{ 
  background-image:url(&#39;d:/bg.gif&#39;);
}

Nach dem Login kopieren

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

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>

Nach dem Login kopieren

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

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.

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

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>

Nach dem Login kopieren

Dann sehen Sie sich den Effekt in der Vorschau an.

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

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>

Nach dem Login kopieren

und sehen den Effekt.

So stellen Sie ein, dass der Hintergrund im CSS unverändert bleibt

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