码迷,mamicode.com
首页 > Web开发 > 详细

-webkit-filter是神马?

时间:2014-10-16 19:28:32      阅读:219      评论:0      收藏:0      [点我收藏+]

标签:style   color   for   sp   div   on   ad   ef   bs   

这些滤镜效果最初是用于SVG的,W3C引入到CSS中,然后制定了CSS Filter Effects 1.0,现在webkit率先支持了它。
 
现在规范中支持的效果有:
 
- grayscale 灰度
- sepia 褐色
- saturate 饱和度
- hue-rotate 色相旋转
- invert 反色
- opacity 透明度
- brightness 亮度
- contrast 对比度
- blur 模糊
- drop-shadow 阴影
 
嗯,有些和CSS3重复了,不过,具体要怎么用还要看具体情况,至少我们可以用不同的方法实现同样的效果——比如透明度。
 
用法是标准的CSS写法:
 
-webkit-filter: blur(2px);
 
原图:
     -webkit-filter:none;
 
灰度:
          -WebKit-filter:grayscale(0.5);灰度50%;
 
模糊:
          -webkit-filter:blur(3px);这是模糊度3px
 
褐色:
          -WebKit-filter:sepia(0.5);50%的褐色
 
亮度:
          -webkit-filter:brightness(5);50%的亮度
 
 色相:
          -WebKit-filter:hue-rotate(180deg);
 
反色:
          -WebKit-filter:invert(1);
 
饱和度:
          -WebKit-filter:saturate(5);
 
对比度:
          -WebKit-filter:contrast(1.4);       

-webkit-filter是神马?

标签:style   color   for   sp   div   on   ad   ef   bs   

原文地址:http://www.cnblogs.com/jxh-it/p/4029189.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!