如何实现整张图片模糊、文字区域清晰的透明文字叠加效果

一、Photoshop可视化操作方案 #

适合单张图片快速处理：

• 打开目标原图，复制一层作为「模糊层」
• 选中模糊层，执行「滤镜 > 模糊 > 高斯模糊」，调整模糊半径到视觉合适的程度
• 在模糊层上方新建文字图层，输入需要显示的文字（调整字体、大小、位置）
• 选中模糊层，右键选择「创建剪贴蒙版」，此时模糊层仅会在文字以外的区域显示，文字区域自动透出下方的清晰原图
• 合并可见图层后导出即可

二、Web前端CSS实现方案 #

适合网页中动态展示的场景：
首先构建HTML结构：

<div class="blur-wrapper">
  <div class="blurred-bg"></div>
  <h2 class="clear-text">需要清晰显示的文字</h2>
</div>

然后添加CSS样式：

.blur-wrapper {
  position: relative;
  width: 1000px;
  height: 700px;
  overflow: hidden;
}

.blurred-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('your-image-path.jpg') center/cover no-repeat;
  filter: blur(10px);
  /* 放大背景避免模糊边缘出现留白 */
  transform: scale(1.1);
}

.clear-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  /* 用背景裁剪让原图显示在文字区域 */
  background: url('your-image-path.jpg') center/cover no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* 可选：添加文字描边提升可读性 */
  -webkit-text-stroke: 1px #333;
  font-size: 56px;
  font-weight: bold;
}

核心原理：底层是整张模糊的背景图，文字层通过background-clip: text将原图仅显示在文字轮廓内，形成文字清晰、其余区域模糊的效果。

三、Python脚本批量处理方案 #

适合批量生成这类效果的场景，依赖Pillow库：

1. 先安装依赖：

pip install pillow

2. 执行以下代码：

from PIL import Image, ImageFilter, ImageDraw, ImageFont

# 配置参数
image_path = "input.jpg"  # 你的原图路径
output_path = "output.jpg"  # 输出路径
text_content = "清晰文字"  # 需要显示的文字
font_size = 72
blur_radius = 8

# 加载原图
original = Image.open(image_path).convert("RGB")
w, h = original.size

# 创建模糊后的图片
blurred = original.filter(ImageFilter.GaussianBlur(radius=blur_radius))

# 创建文字蒙版层
mask = Image.new("L", (w, h), 0)  # 灰度蒙版，0为透明，255为不透明
draw = ImageDraw.Draw(mask)

# 设置字体（可替换为本地字体路径，如"simhei.ttf"）
try:
    font = ImageFont.truetype("arial.ttf", font_size)
except IOError:
    font = ImageFont.load_default()

# 计算文字居中位置
text_w, text_h = draw.textsize(text_content, font=font)
x = (w - text_w) // 2
y = (h - text_h) // 2

# 在蒙版上绘制白色文字（白色区域会保留原图）
draw.text((x, y), text_content, font=font, fill=255)

# 合成图像：蒙版区域显示原图，其余显示模糊图
result = Image.composite(original, blurred, mask)

# 保存结果
result.save(output_path)

原理：通过文字蒙版控制原图的显示区域，仅在文字位置保留原图清晰度，其余区域使用模糊后的图片。

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