使用百分比定义linear gradient失效问题求助

关键知识点 #

线性渐变里的百分比，参考的是渐变方向对应的容器轴长度——横向渐变看容器宽度，纵向看高度，对角线渐变看容器对角线长度。但最终显示还受background-size和background-repeat影响，这大概率是你踩坑的原因。

你的问题拆解 #

你说设每个循环为45%却重复了6次，核心问题应该出在这两点：

• 没搞懂repeating-linear-gradient的循环逻辑
  如果你用的是重复渐变，0%到45%的意思是“每个循环占渐变轴的45%长度”，浏览器会重复这个循环直到填满整个容器的渐变轴。按你的容器尺寸（width: 600px, height: 250px），如果是横向渐变，每个循环是600px × 45% = 270px，只会重复2次左右；但如果你不小心设了background-size（比如background-size: 15% 100%），渐变会被缩放到容器宽度的15%，此时45%的渐变长度对应容器宽度的6.75%，自然会重复十几次。你看到的6次，应该是background-size设成了接近17%的数值。
• 混淆了普通渐变和重复渐变的行为
  要是用的是普通linear-gradient，默认background-repeat: repeat，如果你的渐变只定义到45%（剩下的55%是最后一个颜色的延续），浏览器会把这个渐变当成背景图重复填充容器，也会出现多次循环的错觉。

解决建议 #

• 想让渐变精准循环N次填满容器：用repeating-linear-gradient时，把每个循环的总长度设为100%/N。比如要循环2次，就写repeating-linear-gradient(颜色A 0%, 颜色A 50%, 颜色B 50%, 颜色B 100%)。
• 强制渐变覆盖整个容器：加一句background-size: 100% 100%，避免缩放导致重复次数异常。
• 检查渐变方向：确认你写的渐变方向（比如to right/to bottom）和你预期的一致，别把纵向渐变当成横向，导致参考基准错用了容器高度。

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