如何为矩形图片添加匹配侧边颜色的背景模糊遮罩？

核心思路 #

给图片容器添加半透明同色系背景+模糊效果，让背景与图片侧边颜色呼应，同时保证图片居中显示，达到衬托效果。

HTML 结构 #

用容器包裹目标图片，通过不同类名区分侧边颜色：

<!-- 棕色侧边图片容器 -->
<div class="image-container brown-side">
  <img src="your-image-path.jpg" alt="带棕色侧边的图片">
</div>

<!-- 灰色侧边图片容器 -->
<div class="image-container gray-side">
  <img src="your-image-path.jpg" alt="带灰色侧边的图片">
</div>

CSS 实现方案（现代浏览器优先） #

利用backdrop-filter快速实现模糊效果，同时设置对应颜色的半透明背景：

.image-container {
  /* 容器尺寸可根据需求调整 */
  width: 700px;
  margin: 2rem auto;
  /* Flex布局让图片居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 留出模糊背景的展示空间 */
  padding: 1.5rem;
  border-radius: 8px; /* 可选：给容器加圆角优化视觉 */
}

/* 棕色侧边适配 */
.image-container.brown-side {
  /* 用半透明棕色匹配侧边，透明度可按需调整 */
  background-color: rgba(140, 80, 20, 0.3);
  backdrop-filter: blur(12px); /* 模糊强度可自定义 */
}

/* 灰色侧边适配 */
.image-container.gray-side {
  background-color: rgba(130, 130, 130, 0.3);
  backdrop-filter: blur(12px);
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 4px; /* 可选：给图片加圆角 */
}

兼容旧浏览器的替代方案 #

如果需要兼容不支持backdrop-filter的浏览器，可使用伪元素+filter: blur()实现：

.image-container {
  position: relative;
  width: 700px;
  margin: 2rem auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  border-radius: 8px;
  /* 确保图片在伪元素上方 */
  z-index: 1;
}

.image-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  z-index: -1;
}

.image-container.brown-side::before {
  background-color: rgba(140, 80, 20, 0.3);
  filter: blur(12px);
}

.image-container.gray-side::before {
  background-color: rgba(130, 130, 130, 0.3);
  filter: blur(12px);
}

.image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

优化提示 #

1. 用取色工具提取图片侧边的精确色值，替换背景色的RGB部分，让匹配度更高；
2. 调整背景色的透明度（rgba最后一位数值）和模糊强度（blur()的数值），可以获得不同的视觉层次感。

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