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. css弹性盒子新旧兼容

    前言:本篇随笔是对弹性盒子有了解的人来写的这篇文章,具体属性产生的效果这里不做说明,基础的东西去查文档.这里只是总结. 时至今日,css3的flex弹性盒子在移动端基本上都是支持的,但不排除有些些低版 ...

  2. lesson - 10 课程笔记

    CTRL+C CTRL+D :前者用于结束一个程序,后者用于结束终端输入. --符号 *:匹配任意长度的任意字符 ?:匹配任意一个字符 #: shell 中表注释 \: 脱意符号 []:任意属于字符组 ...

  3. Illustration of Git branching and merge

    网上看到的描述Git工作流程的图片,有些出处忘了保存,仅供学习. 1. One Git Branching Model 出处: http://nvie.com/posts/a-successful-g ...

  4. Hello TensorFlow

    官方说明:https://www.tensorflow.org/install/ 环境: 操作系统 :Windows 10 家庭中文版 处理器 : Intel(R) Core(TM) i7-7700 ...

  5. c语言中的转义序列

    c中的输出函数printf()可以带以下的转义序列,不同的转义序列会得到不同的结果. 1.\a:警报 2.\b:退格(光标回退一格)3.\f:换页4.\n:换行(光标去到下一行的起始处)5.\r:回车 ...

  6. 正确使用volatile场景--状态标志

    同步机制:volatile 特点:可见性:不具备原子性 每个线程有自己单独的内存:如果线程1和线程2公用一个变量name:如果两个线程并发进行,并且需要访问变量name:如果这个变量具有了可见性,线程 ...

  7. 【原创】java NIO FileChannel 学习笔记 FileChannel实现分析 即FileChannelImpl分析

    上文已经说了FileChannel是一个抽象类,FileChannelImpl是其实现,接下来介绍FileChannelImpl,参考代码来自OpenJDK7 首先 public class File ...

  8. 例子：web版坦克大战1.0

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. java多线程(七)－线程之间的 协作

    对于多线程之间的共享受限资源,我们是通过锁(互斥)的方式来进行保护的,从而避免发生受限资源被多个线程同时访问的问题.那么线程之间既然有互斥,那么也会有协作.线程之间的协作也是必不可少的,比如 盖个商场 ...

  10. angular4.0项目文件解读

    这篇文章我觉得是很有用的,便于我们对ng项目的理解,同时在配置项目时,也能够很快的定位到相应文件. 摘录的别人的文章,首先感谢那个路人兄弟,下面就开始学习吧. File 文件 Purpose 用途 e ...