巧用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

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

相关文章
CSS3实现京东图片鼠标滑过流光效果
京东首页从1F开始,左侧大图都有一个很有意思的效果,当你的鼠标滑过图片时,会有一层质感很强的流光从左侧不可见位置滑动到右侧不可见位置的效果。相较于淘宝的蒙版效果,个人感觉流光效果更好看一些。因此,本站一些图片也采用了这种流光效果,具体可鼠标滑过博文封面图预览。
1186 0
用PS设计等高线效果的背景图片
有些简单的单网页,如果利用等高线效果的背景图片,再配合合适的背景色,能达到绚丽的效果。如下图所示:   本文就介绍该等高线效果的背景图片是如何制作的。Follow Me!!!!   1、新建文档,尺寸:1000px*1000px   2、用矩形工具创建一个矩形,尺寸:500px*...
685 0
巧用CSS3滤镜实现图片不同渲染效果
本站在首页文章封面图从无色转变为有色,以及页面切换、发布留言等信息提示的背景模糊都利用到了css3的filter滤镜。 CSS3 Filter是W3C CSS filter Effect 1.0中定义的滤镜,一个使用CSS来改变图片和HTML的模糊度、亮度、对比度、饱和度等等效果的过滤器。
1037 0
写一个图片轮播效果的Demo(自动播放)附代码
js图片轮播切换 .imgCon { width: 450px; height: 300px;...
842 0
用CSS设置的border属性及标签不显示下划线
1.在CSS样式表中并不能直接对表格元素的border元素进行设定,那么要想实现像Excel表格样式的表格怎么办呢?只能对表格和单元格分别加边框来实现,具体的是:对表格显示上边框和左边框,而让每个单元格显示下边框和右边框,这样一组合起来就达到了中的border一样的效果,具体的代码如下: TABLE.
851 0
Java 图片添加水印效果
package com.xiaowu.drawwater.demo; import java.awt.AlphaComposite; import java.awt.Graphics2D; import java.
1025 0
+关注
水灵儿
www.zyl.me 爱折腾,喜欢造,花起钱来毫不心疼,事后沉默一周... 极简主义者,主从事Web开发兼前端爱好者。 全栈开发尝试者、自媒体、极简主义者、爱心极客
144
文章
83
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载