css 鼠标放上图片变暗

在网页设计中，让鼠标放上图片变暗是一种常见的交互体验。这种效果可以让用户更直观地感知到鼠标与元素的交互，从而提升用户体验。

实现这种效果的方法包括使用JavaScript、CSS3等技术。其中，使用CSS3的技术最为简单易用，这里我们来介绍一下如何使用CSS3来让鼠标放上图片变暗。

首先，我们要通过CSS3的伪类选择器:hover来选中鼠标放上去的状态。

img:hover {
  /* 在这里设置变暗的效果 */
}

然后，我们使用CSS3的filter属性来添加图片变暗的效果。具体使用方法是将filter的值设置为brightness(50%)，这样图片就会变暗50%。

img:hover {
  filter: brightness(50%);
}

当然，如果你想让变暗程度更大，可以将brightness的值调低，例如brightness(30%)。

最后，我们来看一下完整的实现代码：

img:hover {
  filter: brightness(50%);
}

如此简单的代码，就能实现在鼠标放上去时让图片变暗的效果了！