CSS需求：让白色渐变覆盖的图片区域模糊，现有尝试方案失败

我懂你要的效果——给图片加一层白色线性渐变，同时让渐变盖着的那块区域图片本身变模糊，而不是只让渐变层模糊对吧？之前用伪元素只模糊了覆盖层，那个边框方案又因为透明属性搞出正方形，确实头疼，我给你两个靠谱的实现思路：

方案一：双图叠加+遮罩（兼容性好） #

这个思路是用两张相同的图片，一张清晰当底，一张模糊放上面，然后用渐变遮罩只让模糊图在渐变区域显示，完美贴合渐变形状：

HTML结构 #

<div class="image-wrapper">
  <img src="你的图片URL" alt="要处理的图片" class="clear-img">
  <img src="你的图片URL" alt="模糊区域图" class="blurred-img">
</div>

CSS样式 #

.image-wrapper {
  position: relative;
  width: 600px; /* 按需调整尺寸 */
  height: 400px;
  overflow: hidden;
}

.clear-img, .blurred-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 保证图片铺满容器不变形 */
}

.blurred-img {
  position: absolute;
  top: 0;
  left: 0;
  filter: blur(10px); /* 调整模糊程度，数值越大越模糊 */
  /* 用线性渐变作为遮罩：这里是从顶部不透明到底部透明，对应显示模糊区域 */
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0)); /* 兼容webkit内核浏览器 */
}

方案二：单背景图+伪元素（更高效） #

不想加载两张图的话，可以用容器背景图+伪元素继承背景的方式，代码更简洁：

HTML结构 #

<div class="image-wrapper"></div>

CSS样式 #

.image-wrapper {
  position: relative;
  width: 600px;
  height: 400px;
  background: url("你的图片URL") center/cover no-repeat;
}

.image-wrapper::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit; /* 直接继承容器的背景图，不用重复写URL */
  filter: blur(10px);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
}

为什么这个方案能解决你的问题？ #

• 之前的伪元素方案是给渐变层加模糊，相当于模糊了渐变本身，而这个方案是模糊图片本身，再用渐变遮罩控制模糊区域的显示范围，完全符合你的需求。
• 那个边框方案的问题出在遮罩逻辑不对，用mask-image的话，遮罩的形状完全跟着渐变走，不会出现正方形的问题，你可以随便调整渐变的方向、色值、透明度，模糊区域都会精准匹配。

如果需要调整渐变的方向（比如从左到右、对角线），只要修改linear-gradient的参数就行，比如linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0))就是从左到右的模糊区域。

内容的提问来源于stack exchange，提问作者José Moreira