一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

CSS3滤镜实现图片不同渲染效果例子

时间:2016-05-09 编辑:简简单单 来源:一聚教程网

本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。目前有grayscale、blur、invert、saturate等10个filter-function。filter属性目前支持的浏览器较少,chrome,Firefox基本都支持了,IE只有EDGE(这个算IE吗)部分支持。具体兼容性请自行测试一下。这里的Demo在chrome(47.0.2526.80),Firefox(43)上测试通过。:

filter主要用于图片,SVG等元素上,其默认值是none,有以下10个filter-function值可选:
 grayscale(灰度)效果类似于PS中的去色或者黑白
 blur(模糊)效果类似于PS中的高斯模糊
 invert(反相)效果类似于PS中的反相
 opacity(透明度)效果类似于PS中的图层不透明度
 saturate(饱和度)效果类似于PS中的饱和度
 brightness(亮度)效果类似于PS中的亮度
 contrast(对比度)效果类似于PS中的对比度
 drop-shadow(阴影)效果类似于PS中的投影
 sepia(怀旧)效果类似于相机中的老照片滤镜
 hue-rotate(色相)效果类似于PS中的色相+旋转(不知道怎么说)

grayscale(灰度)

.filter-grayscale{
     -webkit-filter : grayscale(1);
     filter : grayscale(1);

}

水墨寒的博客

blur(模糊)

.filter-blur{
     -webkit-filter : blur(3px);
      filter : blur(3px);
}

水墨寒的博客

invert(反相)

.filter-invert{
    -webkit-filter : invert(1);

水墨寒的博客
 

opacity(透明度)

 .filter-opacity{
     -webkit-filter : opacity(.3);
     filter : opacity(.3);
}

水墨寒的博客

saturate(饱和度)

.filter-saturate{
     -webkit-filter : saturate(.3);
     filter : saturate(.3);
}

水墨寒的博客

brightness(亮度)

.filter-brightness{
    -webkit-filter : brightness(.3);
    filter : brightness(.3);
}

水墨寒的博客

contrast(对比度)

.filter-contrast{
    -webkit-filter : contrast(3);
    filter : contrast(3);
}

水墨寒的博客

drop-shadow(阴影)

 .filter-drop-shadow{
    -webkit-filter : drop-shadow(5px 3px 7px #888);
    filter : drop-shadow(5px 3px 7px #888);
}

水墨寒的博客

sepia(怀旧)

.filter-sepia{
    -webkit-filter : sepia(1);
     filter : sepia(1);
}

水墨寒的博客

hue-rotate(色相)

.filter-hue-rotate{
    -webkit-filter : hue-rotate(135deg);
    filter : hue-rotate(135deg);
}

水墨寒的博客

热门栏目