如何为可滚动图片容器左右侧添加模糊渐变效果？

核心CSS属性说明 #

实现该效果的关键CSS属性如下：

• filter: blur(<length>)：为元素添加模糊效果，数值越大模糊程度越高
• opacity: <number>：控制元素透明度，取值范围0（完全透明）到1（完全不透明）
• scroll-snap-type + scroll-snap-align：让滚动时图片自动吸附到容器视口中心，确保中间图片始终清晰
• mask-image（可选）：给容器添加渐变遮罩，增强边缘透明过渡效果

修改后的完整代码 #

HTML（微调结构以适配布局）

<div class="img-container">
  <div class="img-tokry row">
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
    <div class="imgs">
      <img class="nft-img" src="/Graphics/IMGs/5-01.png" alt="NFT Image" />
    </div>
  </div>
</div>

CSS

/* 外层容器：提供固定视口，隐藏溢出内容 */
.img-container {
  width: 500px;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}

/* 滚动容器：开启横向滚动，设置滚动吸附规则 */
.img-tokry {
  display: flex;
  padding: 2em 0;
  gap: 2em;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  justify-content: flex-start;
  /* 隐藏滚动条（可选） */
  scrollbar-width: none;
}

.img-tokry::-webkit-scrollbar {
  display: none;
}

/* 图片容器：设置滚动吸附对齐，确保滚动时图片居中 */
.imgs {
  scroll-snap-align: center;
}

/* 基础图片样式 */
.nft-img {
  width: 200px;
  height: 200px;
  border: 2px solid var(--cl-1--);
  border-radius: 15%;
  transition: all 0.3s ease-in-out;
}

.nft-img:hover {
  transform: scale(1.3);
  border-color: var(--cl-2--);
}

/* 为两侧图片分层设置模糊+透明效果，可根据图片数量调整选择器 */
.imgs:first-child .nft-img,
.imgs:last-child .nft-img {
  filter: blur(8px);
  opacity: 0;
}

.imgs:nth-child(2) .nft-img,
.imgs:nth-last-child(2) .nft-img {
  filter: blur(4px);
  opacity: 0.3;
}

.imgs:nth-child(3) .nft-img,
.imgs:nth-last-child(3) .nft-img {
  filter: blur(2px);
  opacity: 0.6;
}

.imgs:nth-child(4) .nft-img,
.imgs:nth-last-child(4) .nft-img {
  filter: blur(1px);
  opacity: 0.8;
}

/* 中间区域图片保持清晰 */
.imgs:nth-child(n+5):nth-child(-n+7) .nft-img {
  filter: blur(0);
  opacity: 1;
}

进阶动态优化（适配任意数量图片） #

如果图片数量不固定，纯CSS的静态选择器不够灵活，可结合JavaScript根据图片与容器中心的距离动态计算模糊和透明度：

const container = document.querySelector('.img-tokry');
const images = document.querySelectorAll('.nft-img');

function updateBlur() {
  const containerCenter = container.offsetLeft + container.offsetWidth / 2;
  
  images.forEach(img => {
    const imgCenter = img.offsetLeft + img.offsetWidth / 2;
    const distance = Math.abs(imgCenter - containerCenter);
    // 自定义系数调整模糊强度
    const blurAmount = Math.min(distance / 50, 8);
    // 自定义系数调整透明过渡速度
    const opacity = Math.max(1 - distance / 300, 0);
    
    img.style.filter = `blur(${blurAmount}px)`;
    img.style.opacity = opacity;
  });
}

// 初始化效果 + 滚动时实时更新
updateBlur();
container.addEventListener('scroll', updateBlur);

内容的提问来源于stack exchange，提问作者M.amanullah behlim