利用CSS改变图片颜色的多种方法!
前言“说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。”强大的 CSS:filterCSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。filter: none| blur()
·
前言
“说到对图片进行处理,我们经常会想到PhotoShop这类的图像处理工具。作为前端开发者,我们经常会需要处理一些特效,例如根据不同的状态,让图标显示不同的颜色。或者是hover的时候,对图片的对比度,阴影进行处理。”
强大的 CSS:filter
CSS滤镜(filter)属提供的图形特效,像模糊,锐化或元素变色。过滤器通常被用于调整图片,背景和边界的渲染。
filter: none
| blur()
| brightness()
| contrast()
| drop-shadow()
| grayscale()
| hue-rotate()
| invert()
| opacity()
| saturate()
| sepia()
| url();
<!--html-->
<img src="https://note.youdao.com/yws/res/237/WEBRESOURCE7e77df2551fe1a1db1b9d91f4d518917" alt="原图">
filter: none
没有任何效果,默认filter就为none
filter:blur( ) 高斯模糊
给图像一个高斯模糊效果,length值越大,图像越模糊
我们来尝试一下
img {
filter:blur(2px);;
}
brightness(%) 线性乘法
可以让图片看起来更亮或者更暗
img {
filter:brightness(70%);
}
contrast(%) 对比度
调整图像的对比度。
img {
filter:contrast(50%);
}
grayscale(%) 将图像转换为灰度图像
这个效果可以将图片做旧,有一种时代沧桑感。喜欢古风的人一定会喜欢上这个效果的
img {
filter:grayscale(80%);
}
除了古风还有一种用法是有的时候需要将全站变成灰色,如大屠杀纪念日的时候。
可以这样设置:
*{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
}
sepia(%) 将图像转换为深褐色
下面给我的小姐姐一个暖暖的色调。
img {
filter:sepia(51%)
}
这就是强大的 CSS:filter的神奇之处
更多推荐
已为社区贡献3条内容
所有评论(0)