css中filter(滤镜)语法属性总结 一行css代码让图片变黑白

释放双眼,带上耳机,听听看~!

css中的filter属性,中文译为”滤镜”,顾名思义它可以设置图片的饱和度、对比度、透明度、黑白效果等可视效果。下面就给大家详细讲解总结一下css滤镜的使用语法。

0f0a96952618f13

灰度效果

b0155554629f0dd

filter一行代码让图片变灰,通常适用在hover事件。

img{
-webkit-filter:grayscale(100%);
filter:grayscale(100%);
/*将图片设置为黑白模式*/
}

0%-100%为属性值,也可以用0-1来表示。

高斯模糊

552474a39bddcf6

img {
    -weikit-filter: blur(5px);
    filter: blur(5px);
/*设置5像素点的高斯模糊*/
}

给图像设置高斯模糊效果,”radius”一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 值越大越模糊;如果没有设定值,则默认是0。

透明度

44517a774adee12

img {
    -webkit-filter: opacity(10%);
	filter: opacity(10%);
}

这个opacity属性在网站中比较常见,转化图像的透明程度。值在0%-100%之间,值为0时为全透明不显示。也可直接写为opacity:0.1;

其他效果

下面一些属性相对比前面三个没那么常见,也给大家整理出来。

filter:sepia(%);   /*将图像转换为深褐色*/
filter:saturate(%);   /*转换图像的饱和度*/
filter:invert(%);    /*反转输出图像*/
filter:hue-rotate(deg);    /*色相旋转*/
filter:contrast(%);    /*对比度*/
filter:brightness(%)    /*图片亮度*/
filter:drop-shadow(h-shadow v-shadow blur spread color);   
 /*图像阴影效果 例如:filter:drop-shadow(5px 5px 10px black);*/

 

温馨提示:本文最后更新于 2022-05-08 15:58 ,某些文章具有时效性,若有错误或已失效,请在下方留言或联系逆念

给TA打赏
共{{data.count}}人
人已打赏
网络技术

百度网盘无限制扩容无损秒修复技术

2022-5-8 15:50:32

网络技术

QQ动态音乐头像教程

2022-5-8 16:22:36

重要声明

本站资源大多来自网络,如有侵犯你的权益请联系管理员,QQ508044570 我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除!


如果遇到付费才可观看的文章,建议升级终身VIP。全站所有资源任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索