Verwenden Sie CSS geschickt, um das Hintergrundbild im Ansichtsfenster zu korrigieren

醉折花枝作酒筹
Freigeben: 2021-08-12 16:44:50
Original
1745 Leute haben es durchsucht

Im vorherigen Artikel haben wir erfahren, wie man den Hintergrund von Elementen festlegt, lesen Sie bitte „Erhalten Sie farbenfrohe Hintergründe von CSS-Elementen mit einem Trick“. Dieses Mal erfahren Sie, wie Sie das Hintergrundbild im Ansichtsfenster korrigieren. Bei Bedarf können Sie darauf zurückgreifen.

Was sollen wir tun, wenn wir das Hintergrundbild reparieren möchten?

  <style>
    body{
      background-image: url("images/1.jpg");
      background-repeat:no-repeat;
      background-attachment:fixed;
    }
  </style>
</head>
<body>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
<div>为了显示,表明这个一个div元素</div>
<p>为了显示,表明这个一个p元素</p>
</body>
Nach dem Login kopieren

Das Ergebnis dieses kleinen Beispiels ist

Verwenden Sie CSS geschickt, um das Hintergrundbild im Ansichtsfenster zu korrigieren

Wir können sehen, dass sich der Hintergrund dieses kleinen Beispiels wirklich nicht ändert, wenn sich der Text bewegt. Nachdem wir so viel wissen, werfen wir einen Blick darauf, welche Attribute verwendet werden können, um den zu reparierenden Hintergrund festzulegen.

background-attachment Eigenschaft legt fest, ob das Hintergrundbild fest ist oder mit dem Rest der Seite scrollt.

Dieses Attribut hat mehrere Werte, unter denen scroll der Standardwert ist. bedeutet, dass sich das Hintergrundbild bewegt, wenn der Rest der Seite gescrollt wird, während „Fixed“ bedeutet, dass sich das Hintergrundbild nicht bewegt, wenn der Rest der Seite gescrollt wird. Es gibt auch den Wert „local“. Dieser Schlüsselattributwert gibt an, dass der Hintergrund relativ zum Inhalt des Elements festgelegt ist. Wenn ein Element über einen Scrollmechanismus verfügt, scrollt der Hintergrund mit dem Inhalt des Elements, und der Zeichenbereich und der Positionierungsbereich des Hintergrunds sind relativ zum scrollbaren Bereich und nicht zum Rahmen, der sie enthält.

Empfohlenes Lernen: CSS-Video-Tutorial

Das obige ist der detaillierte Inhalt vonVerwenden Sie CSS geschickt, um das Hintergrundbild im Ansichtsfenster zu korrigieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage