css将图片设成黑白

CSS是一种十分重要的前端开发技术，可以通过它实现各种各样的效果，其中一种效果就是将一张图片变成黑白照片。接下来我们就来介绍如何使用CSS实现这种效果。

/* 将图片设为灰度图 */img {
    filter: grayscale(100%);
}

以上代码非常简单，只需为img标签添加filter属性并将值设为grayscale(100%)即可。该属性可以将图片设为指定程度的灰色。

但需要注意的是，这种方法可能会对图片本身的颜色带来影响，因此需要在页面风格符合的情况下使用。如果需要更精细的控制，可以添加其他CSS属性。

/* 将图片设为黑白 */img {
    filter: grayscale(100%) brightness(0%) contrast(100%) hue-rotate(0) saturate(0);
}
    

以上代码中，我们除了添加了grayscale属性外，还添加了brightness、contrast、hue-rotate和saturate属性。具体来说，brightness属性可以控制图片的明暗度，contrast属性可以增加图片的对比度，hue-rotate属性可以控制图片的色相，saturate属性可以控制图片的饱和度。

总之，使用CSS将图片设为黑白照片是一种经典且实用的效果，在实际开发中可以通过适当添加其他CSS属性来实现更加精细的控制。

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