css实现图片黑白效果图 |响应式布局 css框架

/*将图片转为黑白*/
img {
filter: grayscale(100%);
}

上述代码中，filter属性是CSS3新增的属性，它可以定义元素的滤镜效果。其中grayscale函数可以将图片转换为灰度图像。在该函数中，数值为0表示完全保留原色，数值为100%表示完全灰度。大家将数值设为100%，就可以将图片转化为灰度图像了。

/* 鼠标悬浮在图片上时，恢复原来的颜色 */
img:hover {
filter: none;
}

上述代码实现了鼠标悬浮在图片上时，图片恢复原来的颜色。通过:hover选择器选择图片，使用filter属性设置值为none，即可取消原来的滤镜效果，实现图片颜色的恢复。

通过上述代码的实现，大家可以很方便地实现图片黑白效果图，通过鼠标悬浮还可以快速查看原来的图片。在实际开发中，可以根据需求进行调整，添加更多的效果，让页面更加丰富多彩。