海外CN2直连服务器
腾讯云优惠|主机测评网!

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

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

灰度效果

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

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

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

高斯模糊

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

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

透明度

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);*/

大家可以自己建一个html自行测试,记住上面的代码,在网站开发的时候可以带来帮助!

总结

前端是编程中最容易入门的,小编也是最近刚毕业入行前端开发行业,后面会记录一些比较实用的前端小技巧,志同道合的朋友们可以一起学习交流,大佬也不要喷。雪花博客前端技术交流QQ群:477805319

赞(0)
未经允许不得转载:雪花测评 » css中filter(滤镜)语法属性总结 一行css代码让图片变黑白
分享到: 更多 (0)

国内建站推荐腾讯云轻量级应用服务器,开箱即用。最新活动:点我进入