如何为图片添加带文字的彩色模糊叠加层？

可以通过相对定位容器+绝对定位子元素的方式实现，结合backdrop-filter做模糊效果，比单纯用滤镜更精准适配你的需求。

完整代码示例 #

HTML结构

<div class="image-container">
  <img src="你的原图路径" alt="图片描述">
  <div class="blur-overlay"></div>
  <div class="overlay-text">自定义叠加文字</div>
</div>

CSS样式

.image-container {
  position: relative;
  width: 500px; /* 按需设置容器宽度 */
  height: 300px; /* 按需设置容器高度 */
  overflow: hidden; /* 避免内容溢出容器 */
}

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

.blur-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 100, 200, 0.4); /* 半透明蓝色，最后一位数值控制透明度 */
  backdrop-filter: blur(8px); /* 模糊程度，数值越大模糊效果越强 */
  -webkit-backdrop-filter: blur(8px); /* 兼容webkit内核浏览器 */
}

.overlay-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* 让文字在容器内居中 */
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* 增强文字可读性 */
}

关键细节说明 #

• backdrop-filter: blur()：核心属性，让叠加层下方的图片产生模糊效果，而非叠加层自身模糊，这是实现你预期效果的关键，比直接给图片加filter更灵活可控。
• 蓝色叠加层：通过rgba颜色值调整蓝色深浅和透明度，按需修改即可匹配效果图。
• 文字定位：如果不需要居中，直接替换top/left的值为固定位置（比如top: 20px; left: 20px）即可。

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