使用 CSS 实现图片的滤镜效果

它如何工作的

使用一个或多个较新的CSS属性(background-blend-mode, mix-blend-mode, 或者 filter)可以让我们惊艳地处理单个图片效果。 继续阅读

CSS Filter

今天在前端观察上看到了《-webkit-filter是神马?》,感觉特别有意思,具体关于CSS Filter可以看Filter Effects 1.0,以及 filter功能,Webkit率先支持了这几个功能,效果非常赞+10086!

支持的效果有:

  • blur(模糊)
  • grayscale(灰度)
  • drop-shadow(阴影)
  • sepia(褐色滤镜)
  • brightness(亮度)
  • contrast(对比)
  • hue-rotate(色相)
  • invert(反相)
  • saturate(饱和度)
  • opacity(透明度)

 

Chrome 18.0.976.0以上版本看这个demo:

http://www.css88.com/html5-demo/-webkit-filter/index.html 或 http://html5-demos.appspot.com/static/css/filters/index.html