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. 什么是AJAX? AJAX:”Asynchronous JavaScript and XML”中文意思：异步JavaScript和XML。

    指一种创建交互式网页应用的网页开发技术. AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词. 不是指一种单一的技术,而是有机地利用了一系列相关的技术: web标准( Stan ...

  2. Java_Date_01_判断两个时间相差的天数

    二.参考资料 1.java 判断两个时间相差的天数 2.java计算两个日期之间相差天数和相隔天数详解

  3. RSA加解密实现

    RSA是由MIT的三位数学家R.L.Rivest,A.Shamir和L.Adleman[Rivest等1978, 1979]提出的一种用数论构造双钥的方法,被称为MIT体制,后来被广泛称之为RSA体制 ...

  4. [编织消息框架][JAVA核心技术]动态代理介绍

    由于java是种强类型静态语言,在执行时无法动态生成代码,静态语言基本都有这特性 动态生成代码有几种好处,也是弱类型语言的优点 1.部份逻辑可以实现热更新 2.远程调用实现非常适合 3.能动态生成扩展 ...

  5. Webpack 2 视频教程 008 - WDS 端口号等配置相关

    原文发表于我的技术博客 这是我免费发布的高质量超清「Webpack 2 视频教程」. Webpack 作为目前前端开发必备的框架,Webpack 发布了 2.0 版本,此视频就是基于 2.0 的版本讲 ...

  6. Integer和int

    例1: public static void main(String[] args){ Integer a = 128,b = 128; Integer c = 127,d = 127; System ...

  7. 使用 BeanUtils 报错解决记录

    在使用BeanUtils.populate方法时,报错如下: java.lang.NoClassDefFoundError: org/apache/commons/collections/FastHa ...

  8. jQuery Ajax 操作函数 （七）

    函数 描述 jQuery.ajax() 执行异步 HTTP (Ajax) 请求. .ajaxComplete() 当 Ajax 请求完成时注册要调用的处理程序.这是一个 Ajax 事件. .ajaxE ...

  9. GUI—ST_emWin移植

    GUI-ST_emWin移植 一.st_emwin移植 1.stemwin源文件下载:ST官网 https://my.st.com/content/my_st_com/en/search.html#q ...

  10. （译）JToken的层次结构

     原文地址:https://stackoverflow.com/questions/38558844/jcontainer-jobject-jtoken-and-linq-confusion/3856 ...