如何使用 CSS 使图像变暗？

在 Web 开发中，我们经常需要对图像进行一些特效处理，比如让图像变暗。下面将介绍如何使用 CSS 来实现这一效果。

使用 CSS filter 属性

CSS 的 filter 属性可以应用多种视觉效果到元素上，包括图像的变暗。要让图像变暗，可以使用如下代码：

img {
  filter: brightness(50%);
}

这个代码使图像的亮度降低 50%，相当于将其变暗。你也可以将 brightness() 函数的参数设为其他值来实现不同程度的变暗。

兼容性

请注意，CSS 的 filter 属性在一些旧版本的浏览器中可能不被支持。使用 filter 属性时，建议同时提供一个备用方案，以确保在无法实现该效果的浏览器中仍然能够正确显示图像。例如：

img {
  filter: brightness(50%);
  /* 针对旧版浏览器提供的备用方案 */
  background-color: #888;
}

这个代码在不能实现滤镜效果的浏览器中会以灰色背景代替变暗的效果。

总结

使用 CSS filter 属性可以很方便地实现图像变暗效果，但是在使用时应注意浏览器兼容性问题，并提供备用方案以确保用户体验。