用css的:hover伪类配合filter或伪元素遮罩可实现图片悬停变暗：①filter法简洁，设brightness(0.6)加transition；②伪元素法灵活，用::after叠加rgba黑色遮罩并控制opacity。
用CSS的:hover伪类配合filter或background叠加层，就能让图片悬停时自然变暗，无需JavaScript。
方法一：用 filter 调整亮度（最简洁）
直接对 <img> 元素应用 filter: brightness()，悬停时降低亮度值：
- 默认亮度为
brightness(1)（即100%） - 悬停时设为
brightness(0.6)（60%，视觉上明显变暗） - 加
transition让变化平滑过渡
示例代码：
方法二：用伪元素叠加遮罩（更灵活可控）
适合需要精确控制暗色透明度、加文字或图标的情况。给图片容器加 ::after 遮罩层：
- 用
position: relative包裹图片 - 伪元素绝对定位覆盖全图，背景设为黑色+透明度（如
rgba(0,0,0,0.5)） - 默认
opacity: 0，悬停时变为opacity: 1
示例结构：
小技巧与注意事项
- 过渡时间别太长：0.2s–0.4s 最自然，超过 0.5s 显得迟滞
- filter 兼容性好：现代浏览器都支持，IE 不支持但已基本淘汰
- 如果图片有圆角（
border-radius），用伪元素法更稳妥——filter可能导致边缘发虚 - 想同时变暗+放大？可叠加
transform: scale(1.03)，但注意留出溢出空间（overflow: hidden）
两种方式都不复杂，按需选择：快速实现用 filter；要叠加文字、按钮或精细控制就用伪元素遮罩。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
