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

元素作为我们的网页背景。代码如下：

上述代码中，我们定义了一个.background类，其样式中包含了一个背景图片，宽高为100vw和100vh，分别表示100%屏幕宽度和100%屏幕高度，使背景图片能够完全覆盖整个屏幕。

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

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

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

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

在上述代码中，我们监听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-attachmentet background-clipen CSS pour y parvenir. Le code est le suivant : rrreeeDans le code ci-dessus, background-attachmentest défini sur fixedpour corriger l'image d'arrière-plan dans la fenêtre afin qu'elle ne bouge pas avec défilement. background-repeatest défini sur no-repeatpour indiquer que l'image d'arrière-plan ne sera pas carrelée à plusieurs reprises. Définissez background-positionsur centerpour centrer l'image d'arrière-plan. Ensuite, nous définissons -webkit-background-clipsur textet -webkit-text-fill-colorsur transparent pour obtenir l’effet creux de l’arrière-plan. Parmi eux, le préfixe -webkitest 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 : rrreeeDans 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-attachmentet background-clippour 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 !