如何仅用CSS为图片右侧应用渐变模糊效果？

嘿，我完全懂你想要实现的那种图片右侧渐变模糊的效果——就是模糊区域从清晰到模糊自然过渡的质感对吧？之前用backdrop-filter没成功大概率是元素结构或属性搭配的问题，我来给你拆解一下怎么用**backdrop-filter + mask**的组合轻松搞定，这比clip-path更适合做渐变过渡的模糊效果：

核心思路 #

我们需要一个容器包裹图片和一个叠加层：叠加层放在图片上层，用backdrop-filter模糊下方的图片，再通过mask给叠加层加渐变遮罩，让模糊效果从右到左自然消失，完美模拟渐变模糊的过渡。

完整代码实现 #

<div class="image-container">
  <img src="你的图片URL" alt="需要添加模糊效果的图片">
  <div class="blur-overlay"></div>
</div>

.image-container {
  position: relative;
  /* 可以根据需求调整容器尺寸 */
  width: 600px;
  height: 400px;
  overflow: hidden; /* 防止模糊层超出容器范围 */
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 让图片铺满容器且保持比例 */
}

.blur-overlay {
  position: absolute;
  right: 0;
  top: 0;
  width: 35%; /* 控制模糊区域的宽度，按需调整 */
  height: 100%;
  /* 核心：模糊后方的图片内容 */
  backdrop-filter: blur(8px);
  /* 渐变遮罩：让模糊层从右到左逐渐透明，实现渐变模糊 */
  mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent);
  /* 兼容webkit内核浏览器（Chrome/Safari） */
  -webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), transparent);
}

关键细节解释 #

1. 为什么之前backdrop-filter没生效？
   大概率是叠加层没有正确定位在图片上方：必须给父容器设position: relative，叠加层设position: absolute，才能让它覆盖在图片上层，backdrop-filter才能作用到下方的图片。

2. mask-image的作用
   这个属性是实现渐变模糊的关键：它给模糊叠加层加了一个从右到左的渐变遮罩——右侧完全不透明（显示模糊效果），左侧完全透明（隐藏模糊效果），这样就形成了模糊从有到无的自然过渡。你还可以调整渐变的节点来控制过渡范围，比如：

   mask-image: linear-gradient(to left, rgba(0,0,0,1) 60%, transparent 100%);
   

   这样模糊的过渡会更集中在右侧区域。

3. 关于clip-path
clip-path更适合做硬边界的不规则裁剪（比如多边形、圆形），没法实现渐变透明的过渡效果，所以用来做这种渐变模糊就不太合适啦，用mask是最优解。

你可以根据自己的需求调整模糊半径（blur()里的数值）、模糊区域宽度、渐变过渡的范围，很灵活的～

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