CSS3基础CSS3滤镜(filter)属性给图片添加特殊效果

CSS3滤镜(filter)属性给图片添加特殊效果

CSS3最强大的地方就在于以前很多需要借助专业软件完成的事情,它都能一行代码轻松实现,比如圆角矩形,阴影等。平时大家都习惯通过Photoshop等图片处理工具调整图片的亮度,灰度,对比度等效果,而CSS3的滤镜属性,可以不用任何软件实现这些效果。本文就简单的说说关于CSS常用的图片滤镜的使用,本文使用的示例图原图如下:

my.png

给图片添加高斯模糊滤镜:

img {filter:blur(2px);} /*-这里的数值表示模糊的程度-*/}

CSS图片高斯模糊.png

设置亮度调节滤镜,使图片变暗:

img {filter:brightness(70%);} /*-如果超过100%,则图片会更亮-*/}

CSS图片变暗.png

设置对比度滤镜,使图片色彩对比度更明显:

img {filter:contrast(140%);} /*-100%表示无变化-*/}

CSS图片对比度.png

设置灰度滤镜,使图片变成黑白:

img {filter:grayscale(100%);} /*-100%表示完全灰色,0%表示无变化-*/}

CSS图片黑白.png

设置图片色相旋转滤镜,改变图片中的色相:

img {filter:hue-rotate(150deg); /*-可设置0~360度改变图片色相-*/}

CSS图片色相.png

设置图片反向滤镜,实现底片效果:

img {filter:invert(60%); /*-可改变百分比值设置反向的程度-*/}

CSS图片底片.png

设置图片饱和度滤镜,调整图片的饱和度:

img {filter:saturate(35%); /*-100%表示图片原饱和度-*/}

CSS图片饱和度.png

设置图片深褐色滤镜,将图片变成老照片的效果:

img {filter:sepia(60%); /*-百分比值越大,深褐色效果越明显-*/}

CSS图片老照片效果.png

此外,CSS滤镜filter属性还可以设置阴影和透明度,它与CSS3的阴影属性和透明度属性效果相似,但略有差别,例如:

给图片设置阴影的滤镜:

img {filter:drop-shadow(5px 5px 10px #000);}

CSS图片阴影滤镜.png而如果通过块阴影属性来设置,阴影显示的有所差别:

img {box-shadow: 5px 5px 10px #000;}

CSS图片阴影.png

给图片设置透明度滤镜:

img {filter:opacity(50%);}

CSS图片透明滤镜.png

此时图片显示的效果与设置透明度属性“opacity:0.5”的效果几乎相同,不同之处在于通过filter属性,有些浏览器为了提升性能会提供硬件加速。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/123.html