HTML怎么做图片模糊效果_html CSS图片模糊blur滤镜【含示例】-html教程-PHP中文网

应将图片设为背景并用伪元素控制模糊范围，避免直接对使用filter: blur()；需注意单位、兼容性、性能及background-position同步。

html怎么做图片模糊效果_html css图片模糊blur滤镜【含示例】

用 `filter: blur()` 实现图片模糊，但别直接套在上

直接对元素加 filter: blur(5px) 确实能出模糊效果，但会模糊整个图片区域（包括边缘），且在缩放、滚动时容易出现渲染毛刺。更稳的做法是把图片设为背景，再用伪元素或包裹层控制模糊范围。

如果图片需要响应式裁剪或居中，用 background-image + background-size: cover 更可控
blur() 的参数单位必须是 px 或 em，不能写 blur(5)（缺单位会失效）
Chrome 和 Firefox 支持良好，但 Safari 15.4 之前对 filter 在上的硬件加速不一致，偶发闪烁

想局部模糊？用 `::before` 叠一层带 `blur()` 的遮罩

比如只让图片下半部分变模糊（常用于文字叠加场景），不能靠裁剪图片本身，而是用定位+伪元素盖住目标区域。

div.image-container {
  position: relative;
  background: url('photo.jpg') no-repeat center;
  background-size: cover;
  height: 400px;
}
div.image-container::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: inherit;
  background-position: center bottom;
  filter: blur(10px);
  z-index: 1;
}

background: inherit 让伪元素复用父容器背景图，避免重复请求
background-position: center bottom 确保模糊区域对应图片底部内容，不是默认顶部
别忘了 z-index，否则伪元素可能被后续文字压在下面