如何实现网页背景从上至下由绿色平滑渐变至半页处蓝色？

直接通过CSS的线性渐变属性就能实现这个需求，核心是指定渐变的终止点在页面50%高度位置，之后保持蓝色不变。

核心代码实现 #

给页面的body元素设置背景样式，同时确保页面容器高度能覆盖整个视口：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background: linear-gradient(to bottom, #2ecc71 0%, #3498db 50%, #3498db 100%);
}

代码说明 #

• linear-gradient(to bottom, ...)：默认渐变方向就是从上到下，明确写出更直观；
• #2ecc71 0%：页面顶部（0%高度位置）显示绿色；
• #3498db 50%：页面半高（50%高度位置）平滑过渡到蓝色；
• #3498db 100%：从半高位置到页面底部，保持蓝色不变，避免继续渐变。

你可以根据需求替换#2ecc71和#3498db为你需要的具体绿色、蓝色色值。

内容的提问来源于stack exchange，提问作者123Hello