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中的色相+旋转，

参考链接：https://smohan.net/blog/5zls13

css3滤镜Filter使用的更多相关文章

  1. CSS3 滤镜Filter亮度动画

    CSS3 滤镜Filter亮度动画 -webkit-filter:brightness 值越高 亮度越亮<pre><!DOCTYPE html><html lang=&q ...

  2. CSS3滤镜filter浅析

    在实现特定显示效果的页面中,css的filter属性是一种强大的工具.它能让我们的页面更加地个性化并减少PS方面的工作.filter的属性值主要有以下十种: blur grayscale sepia ...

  3. Filter Effects - 使用 CSS3 滤镜处理图片

    CSS3 Filter(滤镜)属性提供了提供模糊和改变元素颜色的功能.CSS3 Fitler 常用于调整图像的渲染.背景或边框显示效果.这里给大家分享的这个网站,大家可以体验下 CSS3 对图片的处理 ...

  4. CSS3的滤镜filter属性

    css3的滤镜filter属性,可以对网页中的图片进行类似Photoshop图片处理的效果,例如背景的毛玻璃效果.老照片(黑白照片).火焰效果等. 一.blur(px)高斯模糊 二.brightnes ...

  5. CSS3的filter用法

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

  6. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  7. 使用CSS3滤镜让图片反转颜色

    CSS提供的滤镜也是一大亮点,我一直痴迷其中,有些滤镜的效果很有用,可是有些的滤镜效果可能只是为了玩玩儿,CSS常见的滤镜有这些:grayscale, blur, sepia,所有常见的过滤器.但是如 ...

  8. CSS3魔法堂：CSS3滤镜及Canvas、SVG和IE滤镜替代方案详解[转]

    一.前言    IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后与Chrome合作推出CSS3的Filter特性,因此当前仅Webkit内核的浏览器支持CSS3 F ...

  9. 【CSS3】CSS3 滤镜实现

    作者:^_^肥仔John      来源:CSS3魔法堂:CSS3滤镜及Canvas.SVG和IE滤镜替代方案详解 IE特有的滤镜常常作为CSS3各种新特性的降级处理补充,而Adobe转向HTML5后 ...

随机推荐

  1. jQuery中$(function(){})与(function($){})(jQuery)、$(document).ready(function(){})等的区别详细讲解 ----转载

    1.(function($) {-})(jQuery); 1).原理: 这实际上是匿名函数,如下: function(arg){-} 这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写 ...

  2. Java NIO （二） 缓冲区（Buffer）

    缓冲区(Buffer):一个用于特定基本数据类型的容器,由 java.nio 包定义的,所有缓冲区都是 Buffer 抽象类的子类. Java NIO 中的Buffer 主要用于和NIO中的通道(Ch ...

  3. 解析JSON的两种方法eval()和JSON.parse()

    解析JSON 一种方法是使用eval函数. var dataObj = eval("("+json+")"); 必须把文本包围在括号中,这样才能避免语法错误,迫 ...

  4. ssh简明安全规划

    禁止使用口令只允许使用密钥建立 SSH 连接 1.创建 SSH KEY 使用ssh-keygen生成一个密钥对,并且将公钥注册到服务器的 $HOME/.ssh/authorized_keys 文件. ...

  5. 给yii架构的网站做Android客户端

    网站未预留接口.给这类网站制作客户端就是模拟网页发送的post和get请求,然后获取服务器返回的数据. 1.在做客户端时先使用httpwatch分析浏览器发送的get和post请求的内容和URL.分析 ...

  6. linux svn up 中文显示乱码解决办法

    vi /etc/sysconfig/i18n #LANG="en_US.UTF-8" #LANG=zh_CN.GB18030 #LC_ALL=zh_CN.GB18030 #SYSF ...

  7. ES6(四）字符串的扩展

    1.字符的表示方式 最早在  \u0000-\uFFFF 之间的字符已经足够使用吗,每个字符占两个字节,超出范围,必须使用双字节形式表达, 即每个字符占四个字节.超出范围的字符,会被解读成  \uXX ...

  8. 如何实现虚拟机(VirtualBox)中的Ubuntu与Windows XP间的数据共享

    环境: 主机是Windows XP系统 虚拟机与Ubuntu的版本分别为: VirtualBox-3.2.12-68302-Win ubuntu-10.10-desktop-i386 前提:已安装Vi ...

  9. python词云的制作方法

    第一次接触到词云主要是觉得很好看,就研究了一下,官方给出了代码的,但是新手看的话还是有点不容易,我们来尝试下吧. 环境:python2.7 python库:PIL(pillow),numpy,matp ...

  10. css动画-音频跳动

    css动画-音频跳动 ---------------------------------------------------------------------------- ------------ ...