如何让linear-gradient背景在响应式容器中保持位置并消除空白？

问题根源 #

你使用的垂直方向（0deg）线性渐变是按容器高度的百分比定位颜色节点的。当窄屏场景下容器因内容换行等原因高度增加时，渐变的透明终止点（100%位置）会提前到达容器中部，未被渐变覆盖的区域会露出父元素背景，形成空白。同时默认背景规则会自适应容器尺寸，导致渐变比例在窄屏时失衡。

可行解法 #

方法1：用固定/视口长度替代百分比（推荐）

将渐变中的百分比替换为固定px或vh单位，保证渐变覆盖范围不受容器尺寸变化影响。比如按宽屏容器高度换算成px：

.wrapper {
  min-width: 300px;
  max-width: 960px;
  background: rgb(164, 29, 32);
  background: linear-gradient(0deg, 
    rgba(164, 29, 32, 1) 0px, 
    rgba(164, 29, 32, 1) 360px, /* 对应原30%比例 */
    rgba(78, 58, 47, 1) 900px, /* 对应原75%比例 */
    rgba(63, 41, 29, 0.3) 960px, /* 对应原80%比例 */
    rgba(67, 39, 27, 0) 1200px); /* 对应原100%比例 */
}

如果不想固定px值，用vh单位适配不同设备视口：

.wrapper {
  min-width: 300px;
  max-width: 960px;
  background: rgb(164, 29, 32);
  background: linear-gradient(0deg, 
    rgba(164, 29, 32, 1) 0vh, 
    rgba(164, 29, 32, 1) 30vh, 
    rgba(78, 58, 47, 1) 75vh, 
    rgba(63, 41, 29, 0.3) 80vh, 
    rgba(67, 39, 27, 0) 100vh);
}

方法2：强制背景铺满容器全高

给容器添加背景尺寸和重复规则，确保渐变完全覆盖容器：

.wrapper {
  min-width: 300px;
  max-width: 960px;
  background: rgb(164, 29, 32);
  background: linear-gradient(0deg, rgba(164, 29, 32, 1) 0%, rgba(164, 29, 32, 1) 30%, rgba(78, 58, 47, 1) 75%, rgba(63, 41, 29, 0.3) 80%, rgba(67, 39, 27, 0) 100%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

如果容器高度可能超过视口，再加background-attachment: local，让背景随内容滚动。

方法3：用伪元素承载背景

创建绝对定位的伪元素铺满容器，将渐变放在伪元素上，彻底避免尺寸匹配问题：

.wrapper {
  min-width: 300px;
  max-width: 960px;
  position: relative;
  z-index: 1; /* 确保内容在背景上方 */
}
.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(164, 29, 32);
  background: linear-gradient(0deg, rgba(164, 29, 32, 1) 0%, rgba(164, 29, 32, 1) 30%, rgba(78, 58, 47, 1) 75%, rgba(63, 41, 29, 0.3) 80%, rgba(67, 39, 27, 0) 100%);
  z-index: -1; /* 把背景放在内容下方 */
}

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