CSS3 filterIE的filter完全是两样东东。

Filters主要是运用在图片上,以实现一些特效。(尽管他们也能运用于video上),不过我们在些只来讨论图片上的运用。

语法

 elm {
filter: none | <filter-function > [ <filter-function> ]*
}

其默认值是none,他不具备继承性,其中filter-function一个具有以下值可选:

  1. grayscale灰度
  2. sepia褐色(求专业指点翻译)
  3. saturate饱和度
  4. hue-rotate色相旋转
  5. invert反色
  6. opacity透明度
  7. brightness亮度
  8. contrast对比度
  9. blur模糊
  10. drop-shadow阴影

  

浏览器的兼容性

目前支持这个属性的浏览器少得可怜,现在只是webkit支持,而且只有webkit nightly版本和Chrome 18.0.976以上以上版本才支持,所以说,你要是想看到效果就需要下载这两个版本中的一个,我使用的是Google Chrome Canary

一、grayscale灰度

使用这个特效,会把图片变成灰色的,也就是说你的图片将只有两种颜色“黑色”和“白色”

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

默认值:100%,

如果你在grayscale()中没有任何参数值,将会以“100%”渲染。其效果下图所示:

  

二、sepia

sepia不知道如何译,暂时就叫他“褐色”,使用这种效果,你的图片好像很古老的一样

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

默认值:100%,

如果你在sepia()中没有任参数值,将会以“100%”渲染,具体效果如下:

  

三、saturate饱和度

saturat是用来改变图片的饱和度

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

默认值:100%,

如果我们将其值变大到300%

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

  

  

四、hue-rotate色相旋转

hue-rotate用来改变图片的色相

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

默认值:0deg

  

五、invert反色

invert做出来的效果就像是我们照相机底面的效果一样

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

默认值:100%

  

六、opacity透明度

这个就很好理解了,改变图片的透明度

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

默认值:100%

  

七、brightness亮度

改变图片的亮度

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

默认值:100%

  

八、contrast对比度

改变图片的对比度,整个psd的,都懂这个意思

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

默认值:100%

  

九、blur模糊

一看字面意思就知道了,改变图片的清晰度

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

默认值:0

  

十、drop-shadow阴影

这个很像box-shadow一样的效果,给图片加阴影效果

 .drop-shadow{
-webkit-filter:drop-shadow(5px 5px 5px #ccc);
}

总结

那么上面就是filter中的十种效果,当然大家可以根据自己的需求进行自定义:

.custom{
-webkit-filter:saturate(5) hue-rotate(500deg) grayscale(0.3) sepia(0.7) contrast(1.5) invert(0.2) brightness(.9);
}

  

  

CSS3 Filter特效的更多相关文章

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

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

  2. Magic CSS3 一款独特的CSS3动画特效包

    插件描述: Magic CSS3 Animations  动画是一款独特的CSS3动画特效包,你可以自由地使用在您的网页中.只需简单的在页面上引入 CSS 文件:  magic.css  或者压缩版本 ...

  3. css3动画特效:上下晃动的div

    css3动画特效:上下晃动的div <div id="square" class="container animated">上下晃动</div ...

  4. ShineTime - 带有 CSS3 闪亮特效的缩略图相册

    ShineTime 是一个效果非常精致的缩略图相册,鼠标悬停到缩略图的时候有很炫的闪光效果,基于 CSS3 实现,另外缩略图也会有立体移动的效果.特别适用于个人摄影作品,公司产品展示等用途,快来来围观 ...

  5. CSS3 Filter详解(改变模糊度 亮度 透明度等方法)

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果. -webkit-filter是css3的一个属性,Webkit ...

  6. CSS3 filter:drop-shadow滤镜与box-shadow区别应用 抄的

    CSS3 filter:drop-shadow滤镜与box-shadow区别应用 这篇文章发布于 2016年05月18日,星期三,01:07,归类于 css相关. 阅读 5777 次, 今日 12 次 ...

  7. CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局

    原文:CSS3+HTML5特效8 - 顶部和右侧固定,左侧随窗口变化的布局 效果演示 实现原理 使用3个div(一个是顶部栏,一个是左侧栏,一个是右侧栏): 使用checkbox作为判断是否显示和隐藏 ...

  8. CSS3+HTML5特效9 - 简单的时钟

    原文:CSS3+HTML5特效9 - 简单的时钟 效果演示(加快了100倍)         实现原理 利用CSS3的transform-origin 及 transform 完成以上效果. 代码及说 ...

  9. 9款赏心悦目的HTML5/CSS3应用特效

    经过几天的收集,在html5tricks网站上又增加了不少HTML5的教程和应用,今天我把几款赏心悦目的HTML5/CSS3应用特效总结了一下,一共9款HTML5特效,分享给大家. 1.HTML5 W ...

随机推荐

  1. C# winform Panel 添加 滚动条

    Detailed discussion here. Try this instead for 'only' scrolling vertical.(auto scroll needs to be fa ...

  2. Oracle row_number() over() 分析函数--取出最新数据

    语法格式:row_number() over(partition by 分组列 order by 排序列 desc) 一个很简单的例子 1,先做好准备 create table test1( id v ...

  3. postgresql 修改用户密码

    本文链接:https://blog.csdn.net/pg_hgdb/article/details/79202912如果客户端认证方式为密码验证,那么必然会涉及到修改密码   如何安全地修改密码: ...

  4. learning java 正则表达式

    var regStr = "Java is very good"; Matcher m = Pattern.compile("\\w+").matcher(re ...

  5. C语言实现的简单银行存取款程序 请输入如下数字命令

    #include <stdio.h> int main(void) { //提供变量 cmd balance(余额) deposit(存款) withdraw(取款) //利用while做 ...

  6. cf 799E

    $des$有 $n$ 个物品,第 $i$ 个物品的价格是 $v_i$ ,有两个人,每个人都喜欢 $n$ 个物品中的一些物品.要求选出正好 $m$ 个物品,满足选出的物品中至少有 $k$ 个物品被第一个 ...

  7. 洛谷 P1842 奶牛玩杂技 题解

    P1842 奶牛玩杂技 题目背景 Farmer John 养了N(1<=N<=50,000)头牛,她们已经按1~N依次编上了号.FJ所不知道的是,他的所有牛都梦想着从农场逃走,去参加马戏团 ...

  8. RS译码的描述

    在描述Reed-Solomon码的译码时,需要确定错误多项式的系数,然后进行搜索.通常,错误多项式的最高次数与错误的符号数相同. 如: λ(X)= λ0+ λ1X+ ...+ λνXν. 设该RS码最 ...

  9. Prometheus告警规则增删改自动化

    Prometheus告警规则增删改自动化 前言: 随着容器技术的发展,zabbix监控方式与k8s的结合不完善,导致不得不放弃zabbix,而新的监控工具prometheus的使用就越来越多了.但是经 ...

  10. Leetcode42. 接雨水

    42. 接雨水 做法 考虑单独一列能生产多少贡献:用左右最大值去接这列的水 \(O(n)\) Code class Solution { public: int mx[1000000],rx[1000 ...