应使用CSS filter而非Bootstrap类，因Bootstrap无内置灰度类；推荐用自定义.grayscale-img类结合filter: grayscale(100%)实现，需加backface-visibility: hidden修复Safari模糊问题，并避免opacity类模拟——它仅降低透明度而非真正去色。

图片灰度效果该用 CSS filter 还是 Bootstrap 类？

bootstrap 本身不提供灰度（grayscale）这类视觉滤镜的内置类，img-fluid 或 rounded 等类只管尺寸和边框，不管颜色处理。想让图片在 col 列里变灰，必须自己加 css filter: grayscale() —— 这是唯一可靠、兼容性好、且不影响布局的方式。

如何在 Col 内给 img 添加灰度且保持响应式？

关键点在于：灰度样式不能破坏 Bootstrap 的流式布局，也不能被 img-fluid 的 max-width: 100% 和 height: auto 干扰。推荐直接在 <img> 标签上内联或用自定义 class：

• 用 class 更可控：

  <div class="col">
    <img src="photo.jpg" class="img-fluid grayscale-img">
  </div>

• 对应 CSS 写成：

  .grayscale-img {
    filter: grayscale(100%);
    /* 避免 Safari 下模糊，加 backface-visibility */
    backface-visibility: hidden;
  }

• 如果需要 hover 恢复彩色，加：

  .grayscale-img:hover {
    filter: grayscale(0%);
  }

为什么加 backface-visibility: hidden？

部分 Safari 版本（尤其是 iOS 15–16）对 filter 渲染有 bug，灰度图片可能出现轻微模糊或锯齿。加上 backface-visibility: hidden 能强制触发硬件加速，修复这个问题。Chrome/Firefox 不需要，但加了也没副作用 —— 这个细节容易被忽略，但真上线后用户截图反馈“图片发虚”，大概率就是这儿漏了。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

能否用 Bootstrap 的 opacity 类模拟灰度？

不能。opacity 只降低整体透明度，会让图片变淡发灰，但丢失的是明暗对比，不是真正的灰度转换（即去色）。实际效果是半透+发白，尤其浅色背景上几乎看不清内容。真正灰度必须用 filter: grayscale()，数值可调：grayscale(0%) 是原色，grayscale(70%) 是七成灰，按需微调。