Comment obtenir un effet de creux d'arrière-plan à défilement fluide sur des pages Web grâce à du CSS pur

Comment obtenir l'effet creux d'arrière-plan de défilement fluide des pages Web grâce au CSS pur

Avec le développement continu de la technologie Internet, la conception des pages Web est devenue de plus en plus diversifiée et complexe. Une belle page Web nécessite souvent une attention aux détails et à l’innovation. Parmi eux, l’effet creux d’arrière-plan à défilement fluide est l’un des éléments de conception qui est devenu de plus en plus populaire ces dernières années. Cet effet peut rendre la page Web plus vivante et plus intéressante, et peut attirer l'attention et l'intérêt de l'utilisateur.

Dans cet article, je vais vous présenter comment obtenir l'effet creux d'arrière-plan de défilement fluide des pages Web grâce à du CSS pur et fournir des exemples de code spécifiques. Apprenons ensemble à créer un effet d'arrière-plan de page Web sympa !

Tout d’abord, nous devons créer une structure de document HTML de base. Dans la balise , nous placerons un élément <div> avec une image de fond comme arrière-plan de notre page Web. Le code est le suivant : <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

Dans le code ci-dessus, nous définissons une classe .background, dont le style contient une image de fond d'une largeur et d'une hauteur de 100vw et 100vh, qui représentent 100% de la largeur de l'écran. et 100 % respectivement. Hauteur de l'écran afin que l'image d'arrière-plan couvre complètement tout l'écran.

Ensuite, nous devons ajouter un effet de défilement à la page Web et obtenir un effet de creux sur l'arrière-plan lors du défilement. Ici, nous utilisons les propriétés background-attachment et background-clip en CSS pour y parvenir. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, background-attachment est défini sur fixed pour corriger l'image d'arrière-plan dans la fenêtre afin qu'elle ne bouge pas avec défilement. background-repeat est défini sur no-repeat pour indiquer que l'image d'arrière-plan ne sera pas carrelée à plusieurs reprises. Définissez background-position sur center pour centrer l'image d'arrière-plan. 🎜🎜Ensuite, nous définissons -webkit-background-clip sur text et -webkit-text-fill-color sur transparent pour obtenir l’effet creux de l’arrière-plan. Parmi eux, le préfixe <code>-webkit est destiné à la compatibilité avec certains navigateurs qui ne prennent pas en charge les dernières spécifications CSS. 🎜🎜Enfin, nous utilisons du code JavaScript pour obtenir un effet de défilement fluide. Le code est le suivant : 🎜rrreee🎜Dans le code ci-dessus, nous écoutons l'événement scroll, obtenons la distance de défilement et ajustons la position de l'arrière-plan en fonction de la distance de défilement. Ici, l'effet de défilement du mouvement d'arrière-plan est obtenu en modifiant backgroundPositionY. 🎜🎜Avec l'exemple de code ci-dessus, nous pouvons implémenter une page Web avec un effet creux d'arrière-plan à défilement fluide. Vous pouvez également ajuster les styles et les paramètres du code en fonction de vos propres besoins pour créer une page Web plus personnalisée. 🎜🎜Pour résumer, pour obtenir l'effet creux d'arrière-plan à défilement fluide d'une page Web via du CSS pur, vous devez utiliser des attributs tels que background-attachment et background-clip pour définir l'effet d'arrière-plan, combiné à l'événement Scroll de surveillance JavaScript pour obtenir un effet de défilement fluide. Cet effet peut améliorer l’attrait visuel de la page Web et offrir aux utilisateurs une meilleure expérience. Je pense que grâce à l'introduction et aux exemples de code de cet article, vous pouvez facilement obtenir un effet d'arrière-plan de page Web sympa et ajouter un charme unique à votre page Web. 🎜🎜J'espère que le contenu ci-dessus vous sera utile et je vous souhaite d'écrire un merveilleux design Web ! 🎜