如何为居中固定最大宽的响应式图片添加固定位置渐变？

我明白你的问题了——当页面宽度超过图片最大宽度1920px时，原本加在全屏父容器上的渐变会跟着窗口边缘跑，而不是固定在图片的左右两侧。这是因为你的渐变伪元素绑定在占满100%宽度的.background容器上，而非图片的直接父容器。

这里有个简洁的解决方案，核心是把渐变效果移到图片的直接容器上，让渐变范围完全贴合图片的尺寸：

修改后的代码 #

CSS

/* 全屏固定容器，负责居中图片 */
.background {
  position: fixed;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; /* 可选，让图片垂直居中 */
}

/* 图片直接容器，限制最大宽度为1920px */
.background-img-wrapper {
  position: relative;
  max-width: 1920px;
  width: 100%;
}

/* 合并左右+底部渐变到单个伪元素 */
.background-img-wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: 
    linear-gradient(to right, rgba(252,252,252,1) 0%, rgba(255,255,255,0) 20%, rgba(255,255,255,0) 80%, rgba(252,252,252,1) 100%),
    linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 80%, rgba(252,252,252,1) 100%);
  pointer-events: none; /* 防止渐变层遮挡图片交互 */
}

.img-fluid {
  display: block; /* 消除图片下方默认间隙 */
}

HTML

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<div class="background">
  <div class="background-img-wrapper">
    <img class="img-fluid" src="https://via.placeholder.com/1920x1080/000000/" />
  </div>
</div>

关键调整说明 #

• 渐变伪元素从全屏容器移到了.background-img-wrapper上：这个容器有max-width:1920px且设置为position: relative，伪元素的绝对定位会完全贴合容器边界，也就是图片的实际显示范围。
• 页面宽度超过1920px时，.background-img-wrapper保持居中，渐变会牢牢固定在图片的左右和底部边缘，不会随窗口宽度变化偏移。
• 多重渐变合并到单个伪元素，减少代码冗余；pointer-events: none确保渐变层不会干扰图片的点击、拖拽等交互。

如果你需要单独调整某个渐变的参数，也可以拆分用::before做左右渐变、::after做底部渐变，效果一致。

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