如何用CSS实现图片两侧模糊边缘效果？

这个效果完全可以实现，这类效果通常被称为图片边缘渐变模糊（或边缘羽化延伸模糊），核心是让图片边缘的模糊效果自然渗透到两侧背景中。

实现方法（CSS方案） #

你之前尝试模糊整个内容是因为没有将模糊层与原图做分层处理，以下是可行的实现思路：

1. 给图片套一个容器，设置相对定位和固定宽度（匹配原图尺寸），居中显示。
2. 用容器的伪元素（::before/::after）复制原图作为背景，分别放在容器左右两侧。
3. 给伪元素添加模糊滤镜，并通过渐变遮罩（mask属性）让模糊区域与原图自然过渡，避免生硬边界。

示例代码如下：

/* 图片容器 */
.image-wrapper {
  position: relative;
  width: 800px; /* 替换为你的图片实际宽度 */
  margin: 0 auto;
  overflow: visible;
}

/* 原图样式 */
.image-wrapper img {
  width: 100%;
  display: block;
}

/* 左侧模糊层 */
.image-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -150px; /* 模糊区域宽度 */
  width: 150px;
  background-image: url('你的图片地址'); /* 与原图地址一致 */
  background-size: cover;
  background-position: left center;
  filter: blur(12px); /* 模糊程度可调整 */
  mask: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
}

/* 右侧模糊层 */
.image-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  right: -150px; /* 模糊区域宽度 */
  width: 150px;
  background-image: url('你的图片地址'); /* 与原图地址一致 */
  background-size: cover;
  background-position: right center;
  filter: blur(12px); /* 模糊程度可调整 */
  mask: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0));
}

说明 #

• 调整blur()的数值可以改变模糊强度，修改width和偏移值可以控制模糊区域的宽度。
• 如果需要更好的兼容性，可以将mask属性替换为渐变背景的opacity过渡，但mask的过渡效果更自然。
• 也可以使用backdrop-filter结合渐变遮罩实现，但该属性在部分旧浏览器中兼容性较差。

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