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. Java NIO （一） 初识NIO

    Java NIO(New IO / Non-Blocking IO)是从JDK 1.4版本开始引入的IO API , 可以替代标准的Java IO API .NIO与原来标准IO有同样的作用和目的,但 ...

  2. 腾讯云主机 MySQL 远程访问配置方法

    使用腾讯云主机安装 MySQL 之后,需要通过以下步骤进行配置以实现远程访问,主要分为两大部分 一.服务器端口配置 1.如果你的云主机配置了安全组,如果没有配置安全组就可以直接跳过“步骤1”的操作,否 ...

  3. 手动编译protobuf3的C++源码

    Windows下编译 官方文档 第三方文档 准备工具 Visual Studio 2013 CMake https://cmake.org/ Git https://git-scm.com/ 需要注意 ...

  4. CentOS下 elasticsearch集群安装

    1.进入root目录并下载elasticsearch cd /root wget https://download.elastic.co/elasticsearch/elasticsearch/ela ...

  5. Tomcat在windows系统中的防火墙设置

    在Win7下安装Tomcat后,其他机器无法访问到Tomcat服务,需要修改防火墙设置. 控制面板->window防火墙->允许程序通过Windows防火墙通信 将Tomcat目录下\bi ...

  6. CSS3 自定义动画（animation）

    除了在之前的文章中介绍过的 CSS3 的变形 (transformation) 和转换 (transition) 外,CSS3 还有一种自由度更大的自定义动画,开发者甚至可以使用变形(transfor ...

  7. 使用HTML语言和CSS开发商业站点

    第一章 预习笔记 单词: head:前进 title:标题 meta:超过 body:身体.尸体 W3C:全球最大的中文Web技术教程 strong:强烈的 target:目标,对象 href:水平参 ...

  8. python科学计算_numpy_广播与下标

    多维数组下标 多维数组的下标是用元组来实现每一个维度的,如果元组的长度比维度大则会出错,如果小,则默认元组后面补 : 表示全部访问: 如果一个下标不是元组,则先转换为元组,在转换过程中,列表和数组的转 ...

  9. extjs Proxy

    我们先来看看Extjs非常绚丽的Grid,其功能包括显示数据列表,修改.删除,分页,排序等功能.   Grid组件用来显示Store中的数据.Store可以看做是Model实例的集合.Grid仅关心如 ...

  10. dotnet core 自定义配置文件

    首先添加一个.json 文件,比如 setting.json 文件内容如下,记得把文件设置为“复制到输出目录” { "ConfigSetting": { "XXXName ...