巧用CSS3滤镜实现图片不同渲染效果-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

巧用CSS3滤镜实现图片不同渲染效果

简介: 本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。 CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。

本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了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)上测试通过。先来看一下http://caniuse.com/的兼容性评测:

filter 兼容性filter 兼容性

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中的色相+旋转(不知道怎么说)

DEMO

GRAYSCALE(灰度)

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

BLUR(模糊)

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

INVERT(反相)

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

OPACITY(透明度)

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

SATURATE(饱和度)

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

BRIGHTNESS(亮度)

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

CONTRAST(对比度)

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

DROP-SHADOW(阴影)

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

SEPIA(怀旧)

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

HUE-ROTATE(色相)

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

DEMO

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章