Verwenden Sie CSS geschickt, um das Hintergrundbild im Ansichtsfenster zu korrigieren-Front-End-Fragen und Antworten-php.cn

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

醉折花枝作酒筹

Freigeben： 2021-08-12 16:44:50

Original

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