如何在HTML中制作图片亮度过渡效果-html教程-PHP中文网

用filter: brightness()配合transition实现顺滑亮度过渡需三处关键：基础样式声明transition、默认状态写filter: brightness(1)、:hover只改数值；漏任一导致跳变或失效。

如何在html中制作图片亮度过渡效果

直接用 filter: brightness() 配合 transition 就能实现顺滑的亮度过渡，不需要 JS，但必须写对三处关键位置：基础样式里声明 transition、默认状态写明初始 brightness() 值、:hover 里只改数值——漏掉任何一条，动画都会“咔”一下跳变或完全不触发。

为什么 hover 时 brightness 没有过渡动画

不是浏览器不支持，而是过渡链断了。常见原因包括：

transition 写在 :hover 规则里（必须写在非 hover 的基础选择器中）
默认状态没设 filter: brightness(1)，而是留空或用了 filter: none（none 不是可插值状态，无法过渡）
单位写错，比如 brightness(70)（缺 %）或 brightness(0.7px)（多加单位），整条 filter 声明会被浏览器静默丢弃
父容器设置了 overflow: hidden，而 brightness(1.2) 后边缘泛白，实际被裁掉导致“没变化”错觉

如何正确写出可过渡的 brightness 样式

核心是三行代码各司其职，顺序不能乱：

img {
  filter: brightness(1);           /* 必须显式写，不能省略 */
  transition: filter 0.3s ease;     /* 必须放这里，不能放:hover里 */
}
img:hover {
  filter: brightness(0.6);         /* 只改数值，其他滤镜会重置为默认 */
}

如果同时用多个滤镜（比如还要调对比度），务必在两边都写全：

默认：filter: brightness(1) contrast(1);
悬停：filter: brightness(0.7) contrast(1.1);

漏写某一项，那一项就会回退到浏览器默认值（通常是 1），造成意外跳变。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

移动端和旧版 Safari 的兼容性陷阱

iOS Safari（尤其是 12–14）对 brightness() 的解析不稳定，容易卡顿或闪白帧：

加 transform: translateZ(0) 或 backface-visibility: hidden 强制硬件加速
避免小数精度太高，brightness(1.0001) 在某些版本会被截成 1，保留 1 位小数足够（如 0.7）
旧版 Android Webview 和 iOS 9–12 需要 -webkit-filter 前缀，可双写：filter: brightness(0.7); -webkit-filter: brightness(0.7);
图片容器别依赖 object-fit: cover 动态缩放，尺寸必须固定（用 width/height 或 aspect-ratio），否则触发布局偏移，干扰过渡