当前位置:Gxlcms > html代码 > Css3filter图片处理_html/css_WEB-ITnose

Css3filter图片处理_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:25人阅读

CSS3 增加了filter,即过滤功能,此功能非IE得filter

我想光看上面的效果就能吸引你了,要是你自己动手的话,我想您更会感到神奇。细一看,这些效果就像是photoshop整出来的一样,其实是真是这样的,有很多效果都是类似于photoshop中的特效。不过有一点大家需要特别的注意:此处的CSS3 filter和css filter完全是两样东东。更不是我们一直说的IE滤镜。具体所指的是什么?大家感兴趣的可以点击这里。我就不多说了,因为说也说不清楚,我只想和大家一起探讨的是如休整使用这个“CSS3 Filter”。那我们开始吧。

Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。

语法

      elm {        filter: none |  [  ]*       }

其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

grayscale灰度

sepia褐色(求专业指点翻译)

saturate饱和度

hue-rotate色相旋转

invert反色

opacity透明度

brightness亮度

contrast对比度

blur模糊

drop-shadow阴影

浏览器的兼容性

目前支持这个属性的浏览器少得可怜,现在只是webkit支持,而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持,所以说,你要是想看到效果就需要下载这两个版本中的一个,我使用的是Google Chrome Canary。

关于兼容性方案请参考CSS3魔法堂:CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

人气教程排行