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

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

Dans la conception Web moderne, des effets d'arrière-plan riches peuvent améliorer la beauté et l'expérience utilisateur des pages Web. Parmi eux, le défilement fluide et les effets de dégradé d’image d’arrière-plan sont des méthodes de conception couramment utilisées. Cet article expliquera comment obtenir l'effet de dégradé d'image d'arrière-plan à défilement fluide des pages Web via du CSS pur et fournira des exemples de code spécifiques.

1. Effet de défilement fluide

1. Tout d'abord, nous devons créer un conteneur avec un effet de défilement. En HTML, vous pouvez utiliser un élément
   comme conteneur, comme indiqué ci-dessous :

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

   2. Ensuite, nous devons définir le style du conteneur pour lui donner un effet de défilement fluide. Ceci peut être réalisé en utilisant les propriétés CSS overflow et scroll-behaviour. Le code est le suivant :

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

   Parmi eux, les attributs width et height définissent la largeur et la hauteur du conteneur, l'attribut overflow-y définit le contenu du débordement dans le sens vertical pour qu'il puisse défiler, et l'attribut scroll-behavior définit le comportement de défilement sur un défilement fluide.

   3. Enfin, nous pouvons ajouter du contenu dans le conteneur et déclencher l'effet de défilement fluide en faisant défiler. Le code est le suivant :

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

   2. Effet dégradé de l'image d'arrière-plan

   1. Tout d'abord, nous devons ajouter une image d'arrière-plan au conteneur. Vous pouvez utiliser la propriété background-image de CSS pour spécifier le chemin de l'image d'arrière-plan. Le code est le suivant :

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

   2. Ensuite, nous pouvons utiliser la propriété Linear-gradient de CSS pour obtenir l'effet de dégradé de l'arrière-plan. image. Le code est le suivant :

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

   Dans la fonction linéaire-gradient, nous pouvons spécifier deux valeurs de couleur pour définir les couleurs de début et de fin du dégradé. Ici, rgba est utilisé pour définir la transparence de la couleur. . Dans cet exemple, nous utilisons la même couleur que les couleurs de début et de fin, qui peuvent être ajustées en fonction des besoins réels.

   3. Enfin, vous pouvez déterminer comment l'image d'arrière-plan apparaît dans le conteneur en définissant sa taille et sa position. Le code est le suivant :

   .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;
     /* 其他样式 */
   }

   Dans cet exemple, nous utilisons l'attribut background-size pour définir la taille de l'image d'arrière-plan à couvrir, c'est-à-dire ajuster automatiquement la taille pour couvrir tout le conteneur en utilisant la position d'arrière-plan ; attribut pour définir la position de l’image d’arrière-plan au centre, c’est-à-dire centrée verticalement et horizontalement.

   Pour résumer, grâce aux exemples de code CSS ci-dessus, nous pouvons obtenir l'effet de dégradé d'image d'arrière-plan à défilement fluide de la page Web. J'espère que cet article vous aidera !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!