CSS线性渐变背景末尾出现白色伪线的解决求助

这问题我之前做渐变效果时也踩过坑！这种看似“白线”的问题，其实大多是浏览器渲染渐变时的精度误差，再加上默认背景色的影响导致的，咱们一步步来解决：

问题根源分析 #

你当前的代码里，渐变在25%高度的位置就直接过渡到transparent，而transparent本质是rgba(0,0,0,0)——和你的起始深色rgba(24,54,85,1)不是同色系，浏览器在计算颜色过渡时容易出现细微偏差；再加上html元素默认背景是白色，当body的渐变区域变成透明后，就会露出下面的白色，看起来像是一条线。

优化方案 #

这里给你几个针对性的解决办法，按需选择：

方案1：改用同色系透明终点，消除过渡偏差

把transparent换成和起始色一致的rgba(24,54,85,0)，让渐变在同色系内完成透明过渡，避免跨色系渲染的精度问题：

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

body {
  background: linear-gradient(to bottom, rgba(24,54,85,1), rgba(24,54,85,0) 100%);
}

如果想要和参考图一样的渐变效果（覆盖整个高度），把透明终点设为100%，让过渡更自然。

方案2：统一父元素背景色，避免露出白色

如果确实需要在25%高度就结束渐变，那给html设置和起始色一致的背景色，这样透明区域下面露出的是深色，不会出现白线：

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

html {
  background-color: rgba(24,54,85,1);
}

body {
  background: linear-gradient(to bottom, rgba(24,54,85,1), transparent 25%);
}

方案3：微调渐变范围，优化过渡

如果还是有细微线条，可以尝试给渐变终点加一点缓冲，比如把透明位置设为99%，最后1%保持完全透明的起始色：

body {
  background: linear-gradient(to bottom, rgba(24,54,85,1), rgba(24,54,85,0) 99%, rgba(24,54,85,0) 100%);
}

这种小技巧能帮浏览器更好地处理边缘渲染。

总结 #

核心思路就是：要么让渐变在同色系内过渡，要么确保透明区域下面的背景色和渐变衔接自然，双管齐下就能彻底消除那条恼人的伪白线啦！

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