CSS3 - Pushing the Limits - CSS3 Filters

##CSS3 Filters
可以理解为上面蒙层滤镜
目前只有webkit支持,所以要前缀

针对背景色或者背景图都行

  • grayscale //灰度
  • brightness //亮度
  • contrast //对比度
  • saturate //饱和度 默认是100% 0的时候就是grayscale(100%)
  • sepia //色深 要和背景色或者其他filter一起用,在当前颜色基础上加深
  • hue-rotate // 将颜色 0-360deg 角度值变化颜色发生过渡改变
  • invert //反色
  • opacity //透明度 有硬件性能优化比opacity属性
  • drop-shadow //类似于text-shadow 和box-shadow 但是明显效果更shadow

This is an element with some content

This is an element with some content

  • blur //模糊程度 参数是 px

组合使用 : -webkit-filter:grayscale() sepia() drop-shadow(8px 8px 0 #333)
注意 后面参数都是在前面参数基础上变化的


##Blend Modes

可以是背景色和背景图的混合,也可以多图混合

https://css-tricks.com/basics-css-blend-modes/

http://codepen.io/adobe/pen/FeiCp