[分享]css3控制图片变暗

CSS3在Web前端开发中有着广泛的应用，其中控制图片变暗是其一个重要特性。img:hover { filter: brightness(50); } 使用以上的CSS代码，当鼠标移动到图片上时，图片...

CSS3在Web前端开发中有着广泛的应用，其中控制图片变暗是其一个重要特性。

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

使用以上的CSS代码，当鼠标移动到图片上时，图片的亮度会减少50%。

如果要使图片的色调更暗，可以使用下面的代码：

img:hover {
    filter: contrast(50%) brightness(30%) saturate(0%);
} 

此时，图片的对比度减少50%，亮度减少70%，彩度降至0（即变为黑白照片）。

可以根据实际需要进行调整，使图片效果更加自然、美观。