用 CSS filter 实现图片悬停黑白转彩色，无需 Bootstrap JS；核心是 grayscale(1)→grayscale(0) 切换，配合 :hover 和 transition，移动端需用 touchend 手动控制 active 类。
用 filter 实现图片悬停黑白转彩色，不依赖 Bootstrap JS
Bootstrap 本身不提供“图片黑白转彩色”这类视觉特效功能。它没有内置的类或插件来控制滤镜动画。真正起作用的是 CSS 的 filter 属性，配合 :hover 和过渡即可实现——你完全不需要 Bootstrap 的 JS 或任何额外组件。
常见错误是试图找 bootstrap-black-and-white 这类不存在的类，或者误以为 img-fluid 或 rounded 能影响颜色模式。它们只管尺寸和边框，和滤镜无关。
- 直接在图片上加内联样式或自定义 class，例如：
class="grayscale-hover" - 确保图片加载完成后再触发 hover（否则首次悬停可能有闪烁）
- 移动端需额外处理，因为
:hover在触摸设备上行为不稳定（iOS Safari 默认不触发）
filter: grayscale() 的取值与兼容性要点
grayscale(1) 表示 100% 黑白，grayscale(0) 是原色。中间值如 grayscale(0.5) 是半灰度——但实际做“切换”时，建议只用 0/1，避免插值模糊或渲染差异。
旧版 Safari（-webkit-filter 前缀；IE 完全不支持 filter。如果你必须兼容 IE，得换方案（比如两张图切换 + opacity），但现代项目通常可忽略。
- 推荐写法：
filter: grayscale(1); transition: filter 0.3s ease; - 不要写
filter: url(#grayscale)（SVG 滤镜），维护成本高且兼容性更差 - 注意：
filter会触发硬件加速，频繁使用可能在低端 Android 设备上掉帧
结合 Bootstrap 栅格时图片尺寸错乱怎么办
用 img-fluid 后再加 filter，有时发现 hover 瞬间图片轻微抖动或比例偏移。这是因为 filter 会创建新的层叠上下文（stacking context），可能干扰 object-fit 或父容器的 flex 行为。
- 给图片显式设置
height: auto和width: 100%，避免因滤镜导致重绘尺寸计算偏差 - 如果父容器用了
col-*，确保该列没设固定height，否则img-fluid失效 - 慎用
transform: scale()同时叠加在filter上——某些 Chrome 版本会出现抗锯齿异常
移动端点击生效的替代方案（绕过 :hover 缺失）
iOS 和部分安卓浏览器中，第一次点击是模拟 hover，第二次才真正跳转或触发交互，导致“黑白→彩色”只闪一下就回退。这不是 bug，是规范行为。
可靠做法是用 JavaScript 监听 touchstart 并临时添加 class：
document.querySelectorAll('.grayscale-hover').forEach(img => {
img.addEventListener('touchstart', () => {
img.classList.add('active');
});
});
对应 CSS 中写：.grayscale-hover.active { filter: grayscale(0); }。记得在 touchend 后移除 class，否则状态会卡住。
这个点最容易被忽略：很多人测完桌面就上线，结果用户在手机上根本看不到彩色效果。
