如何修复Div元素渐变背景过度拉伸问题？

你的问题核心在于线性渐变的色标百分比是基于元素自身尺寸计算的，当div高度设为相对值（60%）时，渐变的色块比例会随div实际高度缩放，导致观感变形。以下是两种直接可行的解决方案：

方法一：固定渐变比例，重复填充 #

通过background-size固定渐变的高度值，配合background-repeat让渐变垂直重复，确保色块比例始终不变：

div {
  color: white;
  background-image: linear-gradient(
        180deg,
        rgba(108, 133, 141, 1) 0%,
        rgba(108, 133, 141, 1) 4%,
        rgba(10, 54, 67, 1) 5%,
        rgba(10, 54, 67, 1) 16%,
        rgba(10, 54, 67, 1) 58%,
        rgba(10, 54, 67, 1) 93%,
        rgba(6, 33, 40, 1) 93%,
        rgba(6, 33, 40, 1) 95%,
        rgba(6, 33, 40, 1) 98%);
  /* 固定渐变高度为500px，宽度占满元素 */
  background-size: 100% 500px;
  /* 垂直重复渐变，适配div高度 */
  background-repeat: repeat-y;

  border: 2px solid black;
  border-radius: 8px;
  padding: 10px;
  
  width: 50%;
  height: 60%;
}

方法二：基于视口固定渐变 #

用background-attachment: fixed让渐变绑定浏览器视口而非div自身，这样渐变比例不会随div尺寸拉伸：

div {
  color: white;
  background-image: linear-gradient(
        180deg,
        rgba(108, 133, 141, 1) 0%,
        rgba(108, 133, 141, 1) 4%,
        rgba(10, 54, 67, 1) 5%,
        rgba(10, 54, 67, 1) 16%,
        rgba(10, 54, 67, 1) 58%,
        rgba(10, 54, 67, 1) 93%,
        rgba(6, 33, 40, 1) 93%,
        rgba(6, 33, 40, 1) 95%,
        rgba(6, 33, 40, 1) 98%);
  /* 渐变绑定视口，不随元素滚动或尺寸变化 */
  background-attachment: fixed;
  background-size: 100% 100%;

  border: 2px solid black;
  border-radius: 8px;
  padding: 10px;
  
  width: 50%;
  height: 60%;
}

补充说明 #

• background-cover、object-fit这类属性仅对图片生效，对线性渐变不起作用；background-attachment默认是scroll，只有设为fixed才会脱离元素尺寸限制。
• 方法一适合需要重复渐变图案的场景，方法二更适合将全局渐变作为局部元素背景的场景。

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