如何让带有线性渐变的背景图实现响应式效果

你的问题核心是缺少背景尺寸的适配规则，再加上原代码里background-repeat多写了一个冗余值，导致移动端无法正常适配。按以下方式修改即可解决：

1. 修正背景重复规则 #

你一共设置了两个背景层（图片+渐变），因此background-repeat只需要对应两个值，删掉多余的第三个：

background-repeat: no-repeat, no-repeat;

2. 添加响应式背景尺寸 #

给background-size分别设置两个背景的适配规则：

• 图片用contain：保持图片原始比例，完整显示在容器内，自动适配容器大小
• 渐变用100% 100%：让渐变完全覆盖整个容器区域

background-size: contain, 100% 100%;

3. 确保父元素的定位与尺寸 #

因为伪元素用了position: absolute，父元素.image必须设置position: relative作为定位参考，同时要给父元素设置自适应的尺寸（比如用padding-top维持固定宽高比，或者根据需求设置高度）：

.image {
  position: relative;
  width: 100%;
  /* 示例：用padding-top维持16:9的宽高比，按需调整数值 */
  padding-top: 56.25%;
}

修改后的完整CSS代码 #

.image {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 按需调整宽高比 */
}

.image.filtered:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../../images/logo_color.png),
    linear-gradient(
      to right,
      rgba(164, 128, 255, 0.25),
      rgba(255, 143, 131, 0.25)
    );
  background-repeat: no-repeat, no-repeat;
  background-position: center left, left top;
  background-size: contain, 100% 100%;
}

修改后，背景图会随容器尺寸自适应缩放，渐变层也会始终覆盖整个容器，在移动端就能正常显示了。

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