零基础学会HTML图片模糊效果代码-html教程-PHP中文网

直接用filter:blur()易失效，因img是替换元素，需包裹div并设overflow:hidden、display:block、transition写在常态规则中，且blur值必须带单位（如0px/4px）。

零基础学会html图片模糊效果代码

直接用 filter: blur() 就能实现，但别往 <img> 上硬套——90% 的模糊失效、边缘发黑、手机不响应，都出在这一步。

为什么 `<img>` 加 `filter: blur()` 容易出问题

因为 <img> 是替换元素，自带行内行为：底部默认留白、hover 在 iOS Safari 不触发、模糊时像素向外扩散却没容器兜底，结果就是糊得错位、卡顿、甚至白屏。

必须用 display: block 干掉底部空白
filter: blur(0) 写成 filter: blur(0)（缺单位）→ 整条规则被忽略
没设 overflow: hidden 的父容器 → 模糊溢出，边缘变黑或撑开布局
iOS Safari 默认不给 <img> 派发 :hover，得包一层 <div> 再写 hover <h3>真正稳的图片模糊写法（带 hover 过渡）</h3> <p>用包裹容器控制行为，把模糊逻辑从 <code><img> 移到它的父层，既避开替换元素陷阱，又方便加过渡和定位。

使用HTML,CSS,JavaScript开发Android应用程序英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载
```
div.img-wrapper {
  display: inline-block;
  overflow: hidden;
  transition: filter 0.25s ease;
}
div.img-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}
div.img-wrapper:hover {
  filter: blur(4px);
}
```
- transition 必须写在常态（非 hover）规则里，不是 hover 里
- blur(4px) 是视觉和性能平衡点；超过 8px 在中低端安卓机上明显掉帧
- 如果图片要居中裁剪，优先用 background-image + background-size: cover，比 <img> 更可控
想做毛玻璃（glassmorphism）？别碰 <img>

backdrop-filter 才是正解，但它对 <img> 无效——因为 <img> 没“背后”，只有透明容器+真实背景才能模糊出毛玻璃感。
```
.glass-panel {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 20px;
}
```
- 必须配合 rgba() 背景色，纯 transparent 或 white 都不行
- Safari 必须加 -webkit-backdrop-filter，否则静默失效
- Firefox 默认禁用该特性（需用户手动开启 layout.css.backdrop-filter.enabled），实际项目建议加 @supports 检测 fallback
兼容老浏览器的底线方案

IE 完全不支持 filter 和 backdrop-filter，iOS 12 以下 Safari 对 filter 动画有抖动。真要保底，就放弃实时模糊。
- 用两张图切换：<img src="blur.jpg"> + hover 时 opacity 切换到高清图
- 静态模糊图提前用 Photoshop 或 Canvas 生成，避免前端实时计算
- 别信 -webkit-filter 能救 IE——它只对旧版 WebKit 有效，IE 用的是 MSHTML 引擎
模糊值再小，没单位、没容器、没过渡声明，就等于没写。动手前先确认三件事：单位写了没、父容器有 overflow: hidden 吗、transition 是不是挂在常态选择器上。