图文详细说明CSS3中filter滤镜属性的运用(案例代码)
发表时间:2025-10-20 来源:浏览器大全整理相关软件相关文章人气:
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
最近在网上偶然发现了一个特别牛逼的属性,就是
CSS3中的filter滤镜属性,这个属性可以改变图片的颜色,一张图片可以呈现多种效果,接下来就给大家介绍
CSS3中的filter过滤器的使用方法,以及实例示范filter滤镜的效果,感兴趣的朋友继续往下看吧。
很多人不知道CSS filter是什么意思。filter通俗讲就是指滤镜,官方定义filter属性可以设置元素(通常是<img>)的可视效果(例如:模糊与饱和度)。
filter属性语法:filter: none blur() brightness() contrast() drop-shadow() grayscale() hue-rotate() invert() opacity() saturate() sepia() url();
使用方法:时直接给需要设置的图片添加filter属性就可以了。
可以看到它的属性有很多可选值,接下来简单介绍一下他们的意思
1、grayscale灰度
2、sepia褐色(有种复古的旧照片感觉)
3、saturate饱和度
4、hue-rotate色相旋转
5、invert反色
6、opacity透明度
7、brightness亮度
8、contrast对比度
9、blur模糊
10、drop-shadow阴影
实例示范1:
用filter滤镜属性将图像转换为灰度图像,值就是转换的比例。当值为100%时完全转为灰度图像,当值为0%时图像无变化,当值在0%到100%之间时,则在完全灰度和原图之间。这个例子中将灰度grayscale设置为50%
HTML代码:
<img src="img/草莓.jpg" width="250px" height="192px"/>
CSS代码:
img {
-webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */
filter: grayscale(50%);
} 效果图:


前一个是原图,后面一个是设置了50%灰度呈现的效果。
实例示范2:
用filter滤镜属性将图像设置为高斯模糊,"radius"一值设定高斯函数的标准差,或者是屏幕上以多少像素融在一起, 所以值越大越模糊;如果没有设定值,则默认是0;这个参数可设置css长度值,但不接受百分比值。
img {
-webkit-filter: blur(1.5px); /* Chrome, Safari, Opera */
filter: blur(1.5px);
}效果图:

这个例子中,将blur设为1.5px,让图片有高斯模糊的效果,如图所示。
总结:以上介绍了CSS3中图片滤镜属性filter的使用方法,他有很多的属性值,这里只做了两个示范,至于其他的属性,小伙伴们可以自己动手尝试,说不定有意想不到的效果呢。
以上就是图文详解CSS3中filter滤镜属性的使用(实例代码)的详细内容,更多请关注php中文网其它相关文章!
网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。