css3 hover黑白变彩色

CSS3中的:hover伪类可以让我们在鼠标悬停在指定元素上时，改变该元素的样式。其中，一个有趣的应用是将原本的黑白图片或背景以彩色的方式呈现出来。下面我们来学习实现这种效果的方法。

/* 首先，先将图片或背景置为黑白色 */.img{
       filter: grayscale(100%);
}
/* 当鼠标悬停在元素上时，去掉黑白效果，呈现出彩色 */.img:hover{
       filter: grayscale(0%);
}
    

以上代码中，我们使用filter属性的grayscale函数将图片或背景置为黑白色（grayscale(0%)表示彩色），然后，当鼠标悬停时，将filter的grayscale值改为0%（黑白变彩）。

需要注意的是，在使用这个效果时，要保证图片或背景图本身具备足够的色彩和对比度，这样效果才会更好；同时，在某些情况下，使用filter属性会影响页面的性能，需要适当考虑。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！