最简方式是filter: grayscale(100%)，但Safari旧版本需加-webkit-filter: grayscale(100%)前缀以确保兼容。
灰度滤镜在CSS中怎么写才兼容主流浏览器
直接用 filter: grayscale(100%) 是最简方式，但 Safari 旧版本（-webkit-filter 前缀才能生效。现代项目若还需支持 iOS 12 以下或微信内置浏览器（X5 内核），必须双写：
img.grayscale {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
注意：Chrome/Firefox/Edge 新版已完全支持无前缀写法，-webkit- 仅作兜底，不是必须加在所有地方——比如只面向 macOS/iOS 15+ 的内部管理后台，可直接省略前缀。
SCSS混合宏怎么封装灰度开关且支持参数化强度
硬编码 grayscale(100%) 不灵活，实际常需「默认灰度」「半灰度悬停」「点击反色」等变体。用 SCSS @mixin 封装时，关键点是把数值抽成参数，并自动补前缀：
@mixin grayscale($value: 100%) {
-webkit-filter: grayscale(#{$value});
filter: grayscale(#{$value});
}
// 使用
img {
@include grayscale; // 默认 100%
}
img:hover {
@include grayscale(50%); // 半灰度
}
img.active {
@include grayscale(0%); // 完全彩色
}
别漏掉 #{$value} 的插值语法，否则 SCSS 编译会报错；另外，$value 类型必须是带单位的数值（如 50%），不能传字符串 "50%"，否则生成 CSS 时会多出引号导致失效。
立即学习“前端免费学习笔记（深入）”；
切换灰度时如何避免布局抖动和性能卡顿
灰度滤镜本身不触发重排（reflow），但若图片父容器宽高未固定，或图片用了 object-fit: cover + width: 100% 等响应式写法，滤镜切换瞬间可能引发重绘闪烁。常见诱因有：
-
img没设display: block，行内元素默认有基线间隙 - 父容器用了
flex或grid但未约束子项尺寸 - 滤镜配合
transition: filter 0.3s时，Chrome 旧版对filter过渡优化差，易掉帧
稳妥做法：给图片设固定 width/height 或 aspect-ratio，过渡只作用于 filter，并加 will-change: filter 提示渲染引擎（仅对频繁切换的场景启用）：
img {
display: block;
width: 200px;
height: 150px;
transition: filter 0.2s ease;
}
img:hover {
@include grayscale(0%);
will-change: filter;
}
为什么:hover切换灰度在触摸设备上不生效
这不是 CSS 问题，而是移动端没有持续的 :hover 状态。iOS Safari 和 Android Chrome 在 touch 设备上，:hover 仅在点击后短暂触发一次（模拟“悬停”），之后立即失效。真实需求往往是「点击切换灰度状态」，这时得靠 JS 控制 class：
- 监听
click（非touchstart，避免误触） - 切换自定义 class 如
.is-grayscale，对应 SCSS 中用&.is-grayscale { @include grayscale; } - 为兼容键盘用户，额外加
focus触发逻辑（&.is-grayscale:focus）
纯 CSS 方案无法可靠覆盖 touch 场景，这点容易被忽略——尤其当设计稿只标了 hover 效果时，开发得主动确认是否需支持点击切换。
