能否仅用CSS实现视频制作式背景模糊？该效果有无官方名称？

你的问题核心在于filter: blur()会作用于容器内所有子元素，导致上层图片也被模糊。正确的做法是将模糊背景层与前景内容层分离，让二者在同一容器内重叠，仅给背景层应用模糊效果。

代码示例（Tailwind CSS版本） #

<div class="h-full relative">
  <!-- 模糊背景层：占满容器，仅自身模糊 -->
  <div class="absolute inset-0 bg-[url('你的图片地址')] bg-cover bg-center filter blur-8px"></div>
  <!-- 前景清晰图片：置于背景层上方 -->
  <img class="relative h-[390px] w-full object-contain object-center z-10" src="你的图片地址">
</div>

代码示例（原生CSS版本） #

<div style="height: 100%; position: relative;">
  <!-- 模糊背景层 -->
  <div style="position: absolute; inset: 0;
              background: url('你的图片地址') center/cover no-repeat;
              filter: blur(8px);"></div>
  <!-- 前景清晰图片 -->
  <img style="height: 390px; width: 100%; object-fit: contain; object-position: center;
              position: relative; z-index: 10;" src="你的图片地址">
</div>

关键说明 #

• 父容器设置position: relative，为子元素提供定位上下文
• 背景层用position: absolute+inset: 0占满整个容器，单独添加模糊滤镜
• 前景图片通过position: relative或z-index: 10确保处于背景层上方，避免被模糊影响
• 背景层设置bg-center（或原生CSS的background-position: center），让模糊背景与前景图片内容对齐，视觉更协调

效果的官方名称 #

这个效果在影视与前端领域有明确的细分名称：

• 英文官方名称：当竖屏内容适配横屏容器时，称为 Pillarbox Blur；当横屏内容适配竖屏容器时，称为 Letterbox Blur
• 中文翻译：
  • 柱形模糊补边（对应竖屏转横屏场景）
  • 信箱形模糊补边（对应横屏转竖屏场景）
    通用中文称呼也可直接称为模糊背景补边或背景模糊填充。

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