css中如何改变图片颜色代码

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

在CSS中改变图片的颜色是一件比较常见的操作,主要是通过CSS的滤镜属性实现。以下是一个示例代码:img{ filter: grayscale(100%) invert(100%) sepia(100

在CSS中改变图片的颜色是一件比较常见的操作,主要是通过CSS的滤镜属性实现。以下是一个示例代码:

img{
  filter: grayscale(100%) invert(100%) sepia(100%) saturate(5) hue-rotate(180deg);
} 

在上述代码中,我们可以看到filter属性的值是一个包含多个函数的字符串。每个函数都会对图片进行不同的操作,从而改变其颜色。

下面我们来逐一解释每个函数的作用:

grayscale(100%):将图片变为黑白色。参数是一个百分比,表示将图片转化成灰度的比例。

invert(100%):将图片的色调反转。参数也是一个百分比,表示将图片反转的比例。

sepia(100%):给图片添加一个棕色调。参数同样是百分比。

saturate(5):将图片的饱和度提高到5倍。可根据需要进行调整,参数的值越大,饱和度越高。

hue-rotate(180deg):将图片的色调旋转180度。也可以根据需要进行调整,参数是一个角度值。

总之,通过CSS的滤镜属性,我们可以对图片进行各种奇妙的颜色操作。希望上述示例代码对你有所帮助!

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css中如何改变图片颜色代码

粉丝

0

关注

0

收藏

0

已有0次打赏