CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
好吧,每次写这种博客的时候,都有改版的冲动,我把详细内容写在了这里,请猛击:DEMO
使用方法:
filter:filter(value); filter:filter(value) filter(value) filter(value);/* 多属性 */
Blur(模糊)
图像模糊参数单位:px/em/pt。 示例:
filter: blur(5px); -webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px);
Brightness(亮度)
亮度参数:”-1″至”1″,值越大亮度越高。示例:
filter: brightness(0.3); -webkit-filter: brightness(0.3); -moz-filter: brightness(0.3); -o-filter: brightness(0.3); -ms-filter: brightness(0.3);
Saturation(饱和度)
饱和度参数:半分比,以100%为中间值。 示例:
filter: saturate(50%); -webkit-filter: saturate(50%); -moz-filter: saturate(50%); -o-filter: saturate(50%); -ms-filter: saturate(50%);
Hue Rotate(色相)
色相参数:角度值0—360。 示例:
filter: hue-rotate(180deg); -webkit-filter: hue-rotate(180deg); -moz-filter: hue-rotate(180deg); -o-filter: hue-rotate(180deg); -ms-filter: hue-rotate(180deg);
Contrast(对比度)
对比度参数:百分比;以100%为中间值。示例:
filter: contrast(50%); -webkit-filter: contrast(50%); -moz-filter: contrast(50%); -o-filter: contrast(50%); -ms-filter: contrast(50%);
Invert(反相)
反相参数:百分比;0%-100%。示例:
filter: invert(100%); -webkit-filter: invert(100%); -moz-filter: invert(100%); -o-filter: invert(100%); -ms-filter: invert(100%);
Grayscale(灰度)
灰度参数:百分比 0%-100%。示例:
filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%);
Sepia(怀旧)
怀旧参数:百分比 0%-100%。示例:
filter: sepia(100%); -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%);
:)
There is one more thing
如果你发现过滤后的图片对比原图没有什么变化,那说明你的浏览器不支持这个CSS3 filter属性。
其实目前只有webkit浏览器支持该属性。Safari、Firefox、Opera、IE还不给力。
详细内容请猛戳:DEMO
Pingback:麻凯倩's blog❤前端 » 惊现CSS3 filter
赞啊!受益!~