How to achieve smooth scrolling background image gradient effect on web pages through pure CSS

How to realize the smooth scrolling background image gradient effect of web pages through pure CSS

In modern web design, rich background effects can improve the beauty of web pages and users experience. Among them, smooth scrolling and background image gradient effects are commonly used design methods. This article will introduce how to achieve the smooth scrolling background image gradient effect of web pages through pure CSS, and provide specific code examples.

1. Smooth scrolling effect

1. First, we need to create a container with a scrolling effect. In HTML, you can use a
   element as a container, as shown below:

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

   2. Next, we need to define the style of the container to give it a smooth scrolling effect. This can be achieved using the CSS overflow and scroll-behavior properties. The code is as follows:

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

   Among them, the width and height attributes set the width and height of the container, the overflow-y attribute sets the overflow content in the vertical direction to be scrollable, and the scroll-behavior attribute sets the scrolling behavior to smooth scrolling. .

   3. Finally, we can add content to the container and trigger the smooth scrolling effect by scrolling. The code is as follows:

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

   2. Background image gradient effect

   1. First, we need to add a background image to the container. You can use the background-image property of CSS to specify the path of the background image. The code is as follows:

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

   2. Next, we can use the linear-gradient property of CSS to achieve the gradient effect of the background image. . The code is as follows:

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

   In the linear-gradient function, we can specify two color values ​​to define the starting and ending colors of the gradient. Here, rgba is used to set the transparency of the color. In this example, we use the same color as the starting and ending colors, which can be adjusted according to actual needs.

   3. Finally, you can determine how the background image appears in the container by setting its size and position. The code is as follows:

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

   In this example, we use the background-size attribute to set the size of the background image to cover, that is, automatically adjust the size to cover the entire container; use the background-position attribute to set the background image The position is center, that is, it is displayed in the center vertically and horizontally.

   To sum up, through the above CSS code examples, we can achieve the smooth scrolling background image gradient effect of the web page. Hope this article helps you!

The above is the detailed content of How to achieve smooth scrolling background image gradient effect on web pages through pure CSS. For more information, please follow other related articles on the PHP Chinese website!