首页前端开发CSScss将图片设成黑白

css将图片设成黑白

时间2023-11-21 12:42:03发布访客分类CSS浏览545
导读:CSS是一种十分重要的前端开发技术,可以通过它实现各种各样的效果,其中一种效果就是将一张图片变成黑白照片。接下来我们就来介绍如何使用CSS实现这种效果。/* 将图片设为灰度图 */img {filter: grayscale(100% ;}...

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核实处理,我们将尽快回复您,谢谢合作!


若转载请注明出处: css将图片设成黑白
本文地址: https://pptw.com/jishu/548927.html
css好看的光标类型 css小圆点尺寸

游客 回复需填写必要信息