如何防止小屏幕下线性渐变遮罩出现完全变形？

1. 绑定遮罩与容器的定位关系 #

给banner容器设置相对定位，让after伪元素的定位锚点绑定到容器而非视口：

.banner {
  position: relative;
  /* 保留你的视差相关样式：background-attachment: fixed; 等 */
  overflow: hidden; /* 避免渐变溢出容器 */
}

调整伪元素样式，强制它完全覆盖banner容器：

.banner::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* 替换成你的渐变配置 */
  background: linear-gradient(45deg, transparent 60%, #ffd700 60%, #ffd700 65%, transparent 65%);
  pointer-events: none; /* 不干扰banner内的交互元素 */
}

2. 优化角度渐变的适配性 #

如果要保证彩色条纹在小屏幕下始终贯穿上下，调整渐变的背景尺寸和定位：

.banner::after {
  /* 其他样式不变 */
  background-position: center;
  background-repeat: no-repeat;
  background-size: 200% 200%; /* 放大渐变画布，确保角度条纹覆盖容器 */
}

核心逻辑说明 #

• 伪元素从「视口定位」改为「容器相对定位」，彻底解决小屏幕下遮罩错位、缩小的问题，让遮罩完全依附banner的实际尺寸。
• 用width: 100%和height: 100%强制遮罩覆盖容器，避免视口缩放时出现留白。
• 放大渐变画布的尺寸，确保固定角度的彩色条纹在任何屏幕尺寸下都能贯穿容器上下。

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