CSS3 Filter特效详解
来源:互联网 发布:cmmb电视模块软件 编辑:程序博客网 时间:2024/05/16 02:49
图片处理在写前端页面时经常会遇到,虽然我在工作项目开发中暂时还没碰到过,但是看到网上有很多类似的文章。今天终于抽出时间学习这个CSS3的Filter,在学习后才发现了它的强大之处,就跟我们平时使用PS和美图秀秀的主题应用差不多。
不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。
Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们一般只讨论在图片上的运用。
语法
filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
- grayscale灰度
- sepia褐色(求专业指点翻译)
- saturate饱和度
- hue-rotate色相旋转
- invert反色
- opacity透明度
- brightness亮度
- contrast对比度
- blur模糊
- drop-shadow阴影
浏览器的兼容性
表格中的数字表示支持该方法的第一个浏览器的版本号。紧跟在数字后面的 -webkit- 为指定浏览器的前缀。
下面我们一起来见证这些效果的实现过程,这里有一张没有经过处理的图片:
一、grayscale灰度
使用这个特效,会把图片变成灰色的,也就是说你的图片将只有两种颜色“黑色”和“白色”
img { -webkit-filter: grayscale(50%); /* Chrome, Safari, Opera */ filter: grayscale(50%);}默认值:100%,
如果你在grayscale()中没有任何参数值,将会以“100%”渲染。其效果下图所示:
二、sepia
sepia不知道如何译,暂时就叫他“褐色”,使用这种效果,你的图片好像很古老的一样img { -webkit-filter: sepia(100%); /* Chrome, Safari, Opera */ filter: sepia(100%);}默认值:100%,
如果你在sepia()中没有任参数值,将会以“100%”渲染,具体效果如下:
三、saturate饱和度
img { -webkit-filter: saturate(800%); /* Chrome, Safari, Opera */ filter: saturate(800%);}
四、hue-rotate色相旋转
hue-rotate用来改变图片的色相
img { -webkit-filter: hue-rotate(90deg); /* Chrome, Safari, Opera */ filter: hue-rotate(90deg);}默认值:0deg
五、invert反色
invert做出来的效果就像是我们照相机底面的效果一样img { -webkit-filter: invert(100%); /* Chrome, Safari, Opera */ filter: invert(100%);}默认值:100%
六、opacity透明度
这个就很好理解了,改变图片的透明度
img { -webkit-filter: opacity(30%); /* Chrome, Safari, Opera */ filter: opacity(30%);}默认值:100%
七、brightness亮度
改变图片的亮度img { -webkit-filter: brightness(200%); /* Chrome, Safari, Opera */ filter: brightness(200%);}默认值:100%
八、contrast对比度
改变图片的对比度img { -webkit-filter: contrast(200%); /* Chrome, Safari, Opera */ filter: contrast(200%);}默认值:100%
九、blur模糊
一看字面意思就知道了,改变图片的清晰度
img { -webkit-filter: blur(5px); /* Chrome, Safari, Opera */ filter: blur(5px);}默认值:0
十、drop-shadow阴影
这个很像box-shadow一样的效果,给图片加阴影效果
img { -webkit-filter: drop-shadow(8px 8px 10px red); /* Chrome, Safari, Opera */ filter: drop-shadow(8px 8px 10px red);}
那么上面就是filter中的十种效果,当然大家可以根据自己的需求进行自定义。
img { -webkit-filter: contrast(200%) brightness(150%); /* Chrome, Safari, Opera */ filter: contrast(200%) brightness(150%);}
0 0
- CSS3 Filter特效详解
- CSS3动画特效详解
- CSS3 Filter的十种特效
- CSS3 Filter的十种特效
- HTML5----CSS3图片滤镜(filter)特效
- CSS3 Filter的十种特效
- CSS3 Filter的十种特效
- 浅谈CSS3 Filter的10种特效
- CSS3 Filter的十种特效
- CSS3 Filter的10种特效
- CSS3 Filter的十种特效
- CSS3 Filter的十种特效
- CSS3 Filter的十种特效
- CSS3 Filter的十种特效
- CSS3 Filter的十种特效
- CSS中的Filter样式特效详解
- Css3学习之filter(滤镜)属性详解
- css3特效
- 3 Python 函数传参_(不)可变类型
- hdu1083——Courses(匈牙利算法)
- 全排列问题
- HTMl5的存储方式sessionStorage和localStorage详解
- F - shǎ崽 OrOrOrOrz
- CSS3 Filter特效详解
- Uva 133 救济金发放
- 注入(3)--远程线程注入(CreateRemoteThread)
- 找第k大的东西(密码,uva 1262)
- 求两个整数的最大公约数和最小公倍数(通过调用自定义函数实现)
- 二叉树(C++实现)
- less is more
- apache (2.4.17)+tomcat(7.0.72)集群
- 读书笔记:W3CSchool学习教程-C#教程(上)