css3中的filter属性可以说是简单易用且强大,这些效果作用在图片上实现一些特效(也可以作用在vidio上,此处只讨论图片特效)。

浏览器兼容性

  目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了。另外ie的滤镜也是可以做到的,会另加讨论。

现在规范中支持的效果有:

  • grayscale 灰度               值为0-1之间的小数
  • sepia 褐色         值为0-1之间的小数
  • saturate 饱和度     值为num
  • hue-rotate 色相旋转  值为angle
  • invert 反色        值为0-1之间的小数
  • opacity 透明度     值为0-1之间的小数
  • brightness 亮度     值为0-1之间的小数
  • contrast 对比度     值为num
  • blur 模糊           值为length
  • drop-shadow 阴影

用法是标准的CSS写法,如:

-webkit-filter: blur(2px);

测试浏览器为chrom浏览器44.0版本,示例图片中上方为原图,下方为加fifter效果后的图片。

grayscale灰度

  如果使用该效果参数里没值的话将会以100%来渲染,取值0-1之间为不同的灰度。下面实例为100%的渲染:-webkit-filter:grayscale(1) ;

sepia

  褐色,就是美图秀秀里有个怀旧功能的那种效果,取值也是0-1,-webkit-filter:sepia(1) ;

saturate饱和度

  该属性改变图片的饱和度,取值范围为数字即可,默认值100%,示例为800%:-webkit-saturate(6) ;

hue-rotate色相旋转

  hue-rotate用来改变图片的色相,默认值为0deg,取值为angle,示例:-webkit-filter:hue-rotate(180deg)

invert反色

  invert的效果就和照片底片有点相似,示例:-webkit-filter:invert(1)

opacity透明度

  这个属性经常遇到,示例:-webkit-filter:opacity(0.3)

brightness亮度

  改变图片的亮度,默认值为100%,示例:-webkit-filter:brightness(0.5)

contrast对比度

  这个属性取值和饱和度saturate类似,示例500%:-webkit-filter:contrast(5)

blur模糊

  这个属性改变图片的清晰度,默认值为0,示例:-webkit-filter:blur(1px)

drop-shadow阴影

  这个类似于box-shadow,给图片加阴影,示例:-webkit-filter:drop-shadow(10px 10px 10px #000)

当然,添加多个属性也是可以的,示例:-webkit-filter:saturate(10) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(2.5) invert(0.2) brightness(1.2);

就先这么多了,ie低版本的滤镜效果下次再讨论。

css3中filter的各种特效的更多相关文章

  1. 关于css3 中filter的各种特效

    做项目时遇到了一个有趣的css特效. 目前各大浏览器对于css3的兼容已经非常好了,最新版本都可以支持css3,老版本的ie9以下的还是不支持,不过这不是重点,微软都准备放弃这些老古董了. 现在规范中 ...

  2. [转]CSS3 Filter的十种特效

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  3. css3中强大的filter(滤镜)属性

    CSS3中强大的filter(滤镜)属性 博主最近在做网站的过程中发现了一个非常强大的CSS3属性,就是filter(滤镜)属性,喜欢p图的朋友看名字都应该知道这是什么神器了吧.当然,这个属性的效果肯 ...

  4. CSS3的filter用法

    最近到处看到有人在说CSS3的filter一直没有时间自己去测试这效果.今天终于抽出时间学习这个CSS3的Filter.不整不知道呀,一整才让我感到吃惊,太强大了.大家先来看个效果吧: 我想光看上面的 ...

  5. 纯CSS3实现动态火车行驶特效

    上次开完飞机,这次开火车 查看效果:http://hovertree.com/texiao/css3/7/ 效果图: 代码如下: <!DOCTYPE html> <html> ...

  6. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  7. CSS3中动画属性transform、transition和animation

    Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能 ...

  8. css中filter:alpha透明度使用

    css中filter:alpha透明度使用    使用filter可以设置透明度,filter:alpha在IE下是没有问题的,要支持firefox就需要使用-moz-opacity,下面有个不错的示 ...

  9. 纯css3 加载loading动画特效

    最近项目中要实现当页面还没有加载完给用户提示正在加载的loading,本来是想做个图片提示的,但是图片如果放大电脑的分辨率就会感觉到很虚,体验效果很不好.于是就采用css3+js实现这个loading ...

随机推荐

  1. buildroot 使用小记 - 2 源文件目录结构

    官方下载下来的buildroot源码包在解压后,是一个名为buildroot的文件夹,它下面的目录/文件结构如下: Makefile - 顶级makefile,编译总入口 Config.in - 顶级 ...

  2. Java中的流

    一.Java中流的原理 流是个抽象的概念,是对输入输出设备的抽象,Java程序中,对于数据的输入/输出操作都是以“流”的方式进行.设备可以是文件,网络,内存等. 四种基本流InputStream,Ou ...

  3. 软件工程 speedsnail 第二次冲刺3

    20150520 完成任务:划线第三天,能画出一条直黄线且与蜗牛共存: 遇到问题: 问题1 碰撞检测有缺陷 解决1 没有解决 明日任务: 实现蜗牛与线的碰撞

  4. spring的定时任务或者说自动任务

    http://kevin19900306.iteye.com/blog/1397744   //这个是别人的博客   引入除spring.jar外的Quartz的jar包quartz-all-1.8. ...

  5. 项目总结之MIT (一)

    打开Plan才知道,原来这个项目伴随了我整个八月,做项目的时间果然特别快~~ 首先把之前出现但是只知其然但是不知其所以然的知识点总结一下 一.使用母版页 二.Ajax 控件 & Custome ...

  6. UVALive 6887 Book Club

    最大流,有向环覆盖问题. #include<cstdio> #include<cstring> #include<string> #include<cmath ...

  7. 一句话搞定webmap(一)——轻地图组件

    摘要: 遥想当年.在APP中增加LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript-- 而现在.要制作一张地图真是越来越easy了!居然仅仅须要一句话.就能够 ...

  8. Jetson TX2(3)opencv3 打开usb摄像头

    ubuntu2604 opencv3.4.0 https://blog.csdn.net/ultimate1212/article/details/80936175?utm_source=blogxg ...

  9. [java笔记]JDK的安装和配置

    1.JDK安装下载java JDK:点击下载(http://www.oracle.com/technetwork/java/javase/downloads/index.html )JDK(Java ...

  10. 五种常用web服务器jvm参数设置

     一.tomcat Tomcat默认可以使用的内存为128MB,在较大型的应用项目中,这点内存是不够的,需要调大.有以下几种方法可以选用:第一种方法:在配置文件中设置Windows下,在文件/bi ...