Welcome, Old Sport!

关于CSS的滤镜(Filter)效果介绍

by ilikecss ON 2012/10/16 6434

关于CSS的滤镜(Filter)效果介绍

滤镜(Filter)在CSS2.0时代已经有了,目前CSS3的filter效果有所提升可以直接在样式表里写出来,包括黑白、复古、明亮、鲜艳等效果可以使用。所遗憾的是目前此CSS只有在-webkit-即Chrome浏览器中可以预览,Firefox赞不支持,但可以通过js来实现。以下是我制作的实例,大家可以参照一下。

黑白效果(grayscale)

-webkit-filter: grayscale(100%);

复古效果(sepia)

-webkit-filter: sepia(60%);

鲜艳度(contrast)

 -webkit-filter: contrast(200%);

以上CSS请参照DEMO顺序查看。如果需要页面图片整体调用效果可以在CSS里插入img {某一效果}来实现。

6条评论
  1. #1

    我喜欢次麦当当说道:

    赞~css3,html5越来越强大了,希望更多浏览器能支持,特别希望ie能支持

  2. #2

    Kayo说道:

    CSS3 果然是强大,以前需要一大段代码做出来的效果,CSS3轻松做到!

  3. IE6都支持filter灰色,呵呵。老早了。




TOP