So erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundbild-Verlaufseffekt auf Webseiten

So erzielen Sie mit reinem CSS einen reibungslosen Bildlauf-Hintergrundbildverlaufseffekt auf Webseiten.

Im modernen Webdesign können reichhaltige Hintergrundeffekte die Schönheit und Benutzererfahrung von Webseiten verbessern. Unter diesen sind sanftes Scrollen und Hintergrundbild-Verlaufseffekte häufig verwendete Designmethoden. In diesem Artikel wird erläutert, wie Sie mithilfe von reinem CSS den sanften Scroll-Hintergrundbildverlaufseffekt von Webseiten erzielen, und es werden spezifische Codebeispiele bereitgestellt.

1. Sanfter Scroll-Effekt

1. Zuerst müssen wir einen Container mit einem Scroll-Effekt erstellen. In HTML können Sie ein
   -Element als Container verwenden, wie unten gezeigt:

   <div class="container">
     <!-- 内容部分 -->
   </div>

   Nach dem Login kopieren

   2. Als nächstes müssen wir den Stil des Containers definieren, um ihm einen reibungslosen Scrolleffekt zu verleihen. Dies kann mithilfe der CSS-Eigenschaften overflow und scroll-behavior erreicht werden. Der Code lautet wie folgt:

   .container {
     width: 100%;
     height: 100vh;
     overflow-y: scroll;
     scroll-behavior: smooth;
   }

   Nach dem Login kopieren

   Unter diesen legen die Attribute width und height die Breite und Höhe des Containers fest, das Attribut overflow-y legt den Überlaufinhalt in vertikaler Richtung so fest, dass er scrollbar ist, und das Attribut scroll-behavior Legt das Scrollverhalten auf sanftes Scrollen fest.

   3. Schließlich können wir Inhalte in den Container einfügen und durch Scrollen den Smooth-Scroll-Effekt auslösen. Der Code lautet wie folgt:

   <div class="container">
     <h1>欢迎来到我的网页</h1>
     <!-- 内容部分 -->
   </div>

   Nach dem Login kopieren

   2. Hintergrundbild-Verlaufseffekt

   1. Zuerst müssen wir dem Container ein Hintergrundbild hinzufügen. Sie können die Eigenschaft „Hintergrundbild“ von CSS verwenden, um den Pfad des Hintergrundbilds anzugeben. Der Code lautet wie folgt:

   .container {
     background-image: url("background.jpg");
     /* 其他样式 */
   }

   Nach dem Login kopieren

   2. Als nächstes können wir die Eigenschaft „Linear-Gradient“ von CSS verwenden, um den Verlaufseffekt des Hintergrunds zu erzielen Bild. Der Code lautet wie folgt:

   .container {
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background.jpg");
     /* 其他样式 */
   }

   Nach dem Login kopieren

   In der linearen Verlaufsfunktion können wir zwei Farbwerte angeben, um die Start- und Endfarben des Verlaufs zu definieren. Hier wird rgba verwendet, um die Transparenz der Farbe festzulegen . In diesem Beispiel verwenden wir dieselbe Farbe wie die Start- und Endfarben, die je nach tatsächlichem Bedarf angepasst werden können.

   3. Abschließend können Sie bestimmen, wie das Hintergrundbild im Container angezeigt wird, indem Sie dessen Größe und Position festlegen. Der Code lautet wie folgt:

   .container {
     background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("background.jpg");
     background-size: cover;
     background-position: center;
     /* 其他样式 */
   }

   Nach dem Login kopieren

   In diesem Beispiel verwenden wir das Attribut „background-size“, um die Größe des abzudeckenden Hintergrundbilds festzulegen, d. h. die Größe wird automatisch angepasst, um den gesamten Container abzudecken Attribut, um die Position des Hintergrundbilds auf zentriert festzulegen, d. h. vertikal und horizontal zentriert.

   Zusammenfassend lässt sich sagen, dass wir durch die obigen CSS-Codebeispiele den sanften Scroll-Hintergrundbild-Verlaufseffekt der Webseite erzielen können. Ich hoffe, dieser Artikel hilft Ihnen!

Das obige ist der detaillierte Inhalt vonSo erzielen Sie durch reines CSS einen reibungslosen Scroll-Hintergrundbild-Verlaufseffekt auf Webseiten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!