So erzielen Sie durch reines CSS einen reibungslosen Bildlauf-Hintergrundaushöhlungseffekt auf Webseiten

So erzielen Sie mit reinem CSS den sanften Scroll-Hintergrund-Hohleffekt von Webseiten.

Mit der kontinuierlichen Weiterentwicklung der Internettechnologie ist das Design von Webseiten immer vielfältiger und komplexer geworden. Eine gut aussehende Webseite erfordert oft Liebe zum Detail und Innovation. Unter ihnen ist der sanft scrollende Hohleffekt im Hintergrund eines der Designelemente, die in den letzten Jahren immer beliebter geworden sind. Dieser Effekt kann dazu führen, dass die Webseite lebendiger und interessanter aussieht und die Aufmerksamkeit und das Interesse des Benutzers weckt.

In diesem Artikel werde ich vorstellen, wie man durch reines CSS den sanft scrollenden Hintergrundhohleffekt von Webseiten erzielen kann, und konkrete Codebeispiele bereitstellen. Lassen Sie uns gemeinsam lernen, wie Sie einen coolen Webseiten-Hintergrundeffekt erstellen!

Zuerst müssen wir eine grundlegende HTML-Dokumentstruktur erstellen. Im -Tag platzieren wir ein <div>-Element mit einem Hintergrundbild als Hintergrund unserer Webseite. Der Code lautet wie folgt: <code>标签中，我们将放置一个带有背景图片的<div>元素作为我们的网页背景。代码如下：<pre class='brush:html;toolbar:false;'>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;平滑滚动背景镂空效果&lt;/title&gt; &lt;style&gt; body { margin: 0; padding: 0; overflow-x: hidden; } .background { position: relative; width: 100vw; height: 100vh; background-image: url('background.jpg'); background-size: cover; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;background&quot;&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</pre><p>上述代码中，我们定义了一个<code>.background类，其样式中包含了一个背景图片，宽高为100vw和100vh，分别表示100%屏幕宽度和100%屏幕高度，使背景图片能够完全覆盖整个屏幕。

接下来，我们需要为网页添加一个滚动效果，并在滚动时实现背景的镂空效果。这里我们使用CSS中的background-attachment和background-clip属性来实现。代码如下：

.background {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

在上述代码中，background-attachment设为fixed表示将背景图片固定在视口，使其不会随滚动而移动。background-repeat设置为no-repeat则表示不重复平铺背景图片。background-position设为center表示将背景图片居中显示。

接下来，我们通过设置-webkit-background-clip为text，并将-webkit-text-fill-color设为transparent来实现背景的镂空效果。其中，-webkit前缀是为了兼容一些不支持最新CSS规范的浏览器。

最后，我们使用JavaScript代码来实现平滑滚动的效果。代码如下：

document.addEventListener('DOMContentLoaded', () => {
  const background = document.querySelector('.background');

  window.addEventListener('scroll', () => {
    const scrollTop = window.scrollY || window.pageYOffset;

    background.style.backgroundPositionY = `${scrollTop * 0.5}px`;
  });
});

在上述代码中，我们监听scroll事件，获取滚动距离并根据滚动的距离来调整背景的位置。这里通过改变backgroundPositionY来实现滚动背景移动的效果。

通过以上的代码示例，我们可以实现一个平滑滚动背景镂空效果的网页。你也可以根据自己的需求来调整代码中的样式和参数，制作出更加个性化的网页。

总结起来，通过纯CSS实现网页的平滑滚动背景镂空效果需要使用background-attachment、background-cliprrreee

Im obigen Code definieren wir eine .background-Klasse, deren Stil ein Hintergrundbild mit einer Breite und Höhe von 100vw und 100vh enthält, was 100 % Bildschirmbreite darstellt bzw. 100 %, sodass das Hintergrundbild den gesamten Bildschirm vollständig abdeckt.

Als nächstes müssen wir der Webseite einen Scroll-Effekt hinzufügen und beim Scrollen einen Aushöhlungseffekt im Hintergrund erzielen. Hier verwenden wir die Eigenschaften background-attachment und background-clip in CSS, um dies zu erreichen. Der Code lautet wie folgt: 🎜rrreee🎜Im obigen Code ist background-attachment auf fixed gesetzt, um das Hintergrundbild im Ansichtsfenster zu fixieren, damit es sich nicht mitbewegt Scrollen. background-repeat ist auf no-repeat gesetzt, um anzugeben, dass das Hintergrundbild nicht wiederholt gekachelt wird. Setzen Sie background-position auf center, um das Hintergrundbild zu zentrieren. 🎜🎜Als nächstes setzen wir -webkit-background-clip auf text und -webkit-text-fill-color auf transparent um den Aushöhlungseffekt des Hintergrunds zu erzielen. Unter anderem dient das Präfix <code>-webkit der Kompatibilität mit einigen Browsern, die die neuesten CSS-Spezifikationen nicht unterstützen. 🎜🎜Schließlich verwenden wir JavaScript-Code, um den reibungslosen Scroll-Effekt zu erzielen. Der Code lautet wie folgt: 🎜rrreee🎜Im obigen Code hören wir das scroll-Ereignis ab, ermitteln die Scroll-Distanz und passen die Position des Hintergrunds basierend auf der Scroll-Distanz an. Hier wird der Effekt der scrollenden Hintergrundbewegung durch Ändern von backgroundPositionY erreicht. 🎜🎜Mit dem obigen Codebeispiel können wir eine Webseite mit einem sanft scrollenden Hintergrundhohleffekt implementieren. Sie können die Stile und Parameter im Code auch an Ihre eigenen Bedürfnisse anpassen, um eine personalisiertere Webseite zu erstellen. 🎜🎜Zusammenfassend lässt sich sagen, dass Sie Attribute wie background-attachment und background-clip verwenden müssen, um den sanften Scroll-Hintergrund-Hohleffekt einer Webseite durch reines CSS zu erzielen um den Hintergrundeffekt festzulegen, kombiniert mit der JavaScript-Überwachung des Scroll-Ereignisses, um einen reibungslosen Scroll-Effekt zu erzielen. Dieser Effekt kann die visuelle Attraktivität der Webseite verbessern und den Benutzern ein besseres Erlebnis bieten. Ich glaube, dass Sie durch die Einführung und die Codebeispiele in diesem Artikel leicht einen coolen Webseiten-Hintergrundeffekt erzielen und Ihrer Webseite einen einzigartigen Charme verleihen können. 🎜🎜Ich hoffe, dass der obige Inhalt für Sie hilfreich ist, und ich wünsche Ihnen, dass Sie ein wunderbares Webdesign schreiben! 🎜