最火下载站首页
手机版
最火下载站
关注公众号
最火下载站

当前位置:首页 > 网络知识 > Web前端 > Html/css> CSS 滤镜 -webkit-filter 的介绍和使用

CSS 滤镜 -webkit-filter 的介绍和使用

文章作者:网友投稿 发布时间:2012-10-02 09:25:11 来源:网络

大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定

大家可能对 Instagram 这款 iPhone APP 上的滤镜效果很感兴趣,其实 CSS3 开始也有滤镜(不是 IE 的那种滤镜),这些滤镜效果最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后制定了 CSS Filter Effects 1.0 的规范,Webkit 率先支持了它。

-webkit-filter 的用法

-webkit-filter 用法是标准的 CSS 写法,如:

-webkit-filter: blur(2px);

-webkit-filter 支持的效果有:

  • blur 模糊

  • brightness 亮度

  • contrast 对比度

  • drop-shadow 阴影

  • grayscale 灰度

  • opacity 透明度

  • sepia 褐色

  • invert 反色

  • saturate 饱和度

  • hue-rotate 色相旋转

下面是这几种滤镜具体的效果和代码,请在最新的 Safari 和 Chrome 浏览器上查看效果:

原图

blur 模糊

-webkit-filter:blur(2px);

brightness 亮度

-webkit-filter:brightness(25%);

contrast 对比度

-webkit-filter: contrast(50%);

drop-shadow 阴影

-webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.5));

opacity 透明度

-webkit-filter: opacity(50%);

grayscale 灰度

-webkit-filter: grayscale(80%);

sepia 褐色

-webkit-filter: sepia(100%);

invert 反色

-webkit-filter: invert(100%);

hue-rotate 色相旋转

-webkit-filter:hue-rotate(180deg);

saturate 饱和度

-webkit-filter: saturate(1000%);

上一篇: 如何实现IE6下块级元素的内容自动收缩

下一篇: 图片热区详解 与切片的优势比较

共有0条评论网友评论