支持的效果有:

  • blur(模糊)
  • grayscale(灰度)
  • drop-shadow(阴影)
  • sepia(褐色滤镜)
  • brightness(亮度)
  • contrast(对比)
  • hue-rotate(色相)
  • invert(反相)
  • saturate(饱和度)
  • opacity(透明度)

Chrome 18.0.976.0以上版本看这个demo:

http://www.css88.com/html5-demo/-webkit-filter/index.html 或 (FQ)http://html5-demos.appspot.com/static/css/filters/index.html

滤镜说明:
  Alpha:设置透明层次
  blur:创建高速度移动效果,即模糊效果
  Chroma:制作专用颜色透明
  DropShadow:创建对象的固定影子
  FlipH:创建水平镜像图片
  FlipV:创建垂直镜像图片
  glow:加光辉在附近对象的边外
  gray:把图片灰度化
  invert:反色
  light:创建光源在对象上
  mask:创建透明掩膜在对象上
  shadow:创建偏移固定影子
  wave:波纹效果
  Xray:使对象变得像被x光照射一样
  1、滤镜:Alpha
  语法:STYLE="filter:Alpha(Opacity=opacity, FinishOpacity=finishopacity,Style=style, StartX=startX,StartY=startY,FinishX=finishX,FinishY=finishY)" 
  说明:
  Opacity:起始值,取值为0~100, 0为透明,100为原图。
  FinishOpacity:目标值。
  Style:1或2或3
  StartX:任意值
  StartY:任意值
  例子:filter:Alpha(Opacity="0",FinishOpacity="75",Style="2") 
  2、滤镜:blur
  语法:STYLE="filter:Blur(Add = add, Direction = direction, Strength = strength)"
  说明:
  Add:一般为1,或0。
  Direction:角度,0~315度,步长为45度。
  Strength:效果增长的数值,一般5即可。
  例子:filter:Blur(Add="1",Direction="45",Strength="5")
  3、滤镜:Chroma
  语法:STYLE="filter:Chroma(Color = color)"
  说明:color:#rrggbb格式,任意。
  例子:filter:Chroma(Color="#FFFFFF")
  4、滤镜:DropShadow
  语法:STYLE="filter:DropShadow(Color=color, OffX=offX, OffY=offY, Positive=positive)"
  说明:Color:#rrggbb格式,任意。
  Offx:X轴偏离值。
  Offy:Y轴偏离值。
  Positive:1或0。
  例子:filter:DropShadow(Color="#6699CC",OffX="5",OffY="5",Positive="1")
  5、滤镜:FlipH
  语法:STYLE="filter:FlipH" 
  例子:filter:FlipH 
  6、滤镜:FlipV
  语法:STYLE="filter:FlipV"
  例子:filter:FlipV 
  7、滤镜:glow
  语法:STYLE="filter:Glow(Color=color, Strength=strength)"
  说明:
  Color:发光颜色。
  Strength:强度(0-100)
  例子:filter:Glow(Color="#6699CC",Strength="5")
  8、滤镜:gray
  语法:STYLE="filter:Gray"
  例子:filter:Gray
  9、滤镜:invert
  语法:STYLE="filter:Invert"
  例子:filter:Invert
  10、滤镜:mask
  语法:STYLE="filter:Mask(Color=color)"
  例子:filter:Mask (Color="#FFFFE0")
  11、滤镜:shadow
  语法:filter:Shadow(Color=color, Direction=direction)
  说明:
  Color:#rrggbb格式。
  Direction:角度,0-315度,步长为45度。
  例子:filter:Shadow (Color="#6699CC", Direction="135")
  12、滤镜:wave
  语法:filter: Wave(Add=add,Freq=freq,LightStrength=strength,Phase=phase,Strength=strength)
  说明:
  Add:一般为1,或0。
  Freq:变形值。
  LightStrength:变形百分比。
  Phase:角度变形百分比。
  Strength:变形强度。
  例子:filter: wave(Add="0", Phase="4", Freq="5", LightStrength="5", Strength="2")
  13、滤镜:Xray
  语法:STYLE="filter:Xray" 
  例子:filter:Xray

CSS Filter的更多相关文章

  1. css filter详解

    css filter详解 filter 属性详解 属性 名称 类型 说明 grayscale 灰度 值为数值 取值范围从0到1的小数(包括0和1) sepia 褐色 值为数值 取值范围从0到1的小数( ...

  2. CSS filter 有哪些神奇用途

    背景 基本概念 CSS filter 属性将模糊或颜色偏移等图形效果应用于元素形成滤镜,滤镜通常用于调整图像,背景和边框的渲染.它的值可以为 filter 函数 <filter-function ...

  3. CSS filter 属性

    filter 将模糊或者颜色偏移等图像效果用于元素,通常用于调整图像,背景和边框的渲染 css 标准中已内置一些预定义效果的函数,也可通过url使用SVG滤镜 语法 /* URL to SVG fil ...

  4. CSS filter 模拟黑洞照片效果

    今天被世界上第一张黑洞照片刷屏. 一整天,哪里都是这张照片.看的多了.我就想用css做一个吧. 建议在chrome上查看. 访问地址:http://suohb.com/work/blankHole.h ...

  5. [CSS] Manipulate Images Using CSS Filter and Blend Modes

    Apply filters like blur, brightness, saturation and hue to images. Combined with CSS blend modes, yo ...

  6. 20190614笔记(颜色透明度,css,filter,滤镜,计算属性,json和formData转换)

    今天忙里偷闲,把最近做的笔记做一下整理. 1.json和formData互相转换 适用场景:对接后台接口.后台接口写的因人而异,不同的人有不同的风格.比如,文件上传,原本就是formData格式,有人 ...

  7. 【转载】CSS filter:hue-rotate色调旋转滤镜实现按钮批量生产

    文章转载自 张鑫旭-鑫空间-鑫生活 http://www.zhangxinxu.com/ 原文链接:https://www.zhangxinxu.com/wordpress/2018/11/css-f ...

  8. WebRTC与CSS滤镜(CSS filter)

    我们知道了如何使用WebRTC打开摄像头,可以截取视频帧并且用canvas显示出来. 本文将滤镜与视频结合.给视频加上一层滤镜.主要使用到的是filter属性. canvas与滤镜 先来看filter ...

  9. [css filter]filter在界面实现滤镜效果

    最近逛当当,发现当当尾品会的首页推荐最底端的商品链接是灰色的图片,然后鼠标hover之后就会变成正常的彩色 肯定不是通过img来改变的,然后直接看了一下源码,其实是用的filter属性 _(:з」∠) ...

随机推荐

  1. [LeetCode]题解(python):099-Recover Binary Search Tree

    题目来源: https://leetcode.com/problems/recover-binary-search-tree/ 题意分析: 二叉搜索树中有两个点错了位置,恢复这棵树. 题目思路: 如果 ...

  2. python 10 min系列三之小爬虫(一)

    python10min系列之小爬虫 前一篇可视化大家表示有点难,写点简单的把,比如命令行里看论坛的十大,大家也可以扩展为抓博客园的首页文章 本文原创,同步发布在我的github上 据说去github右 ...

  3. pexpect-pxssh-登陆Linux-执行命令

    #!/usr/bin/python import pexpect import pxssh try: remote=pxssh.pxssh() hostname=raw_input('hostname ...

  4. Vmware虚拟机时间不准问题

    测试程序时碰到虚拟机经常时间不准,深受困扰,后来发现虚拟机有一个设置可以同步虚拟机和宿主机的时间: 该功能需要vmware tools安装成功才能有效.vmware tools的安装就不多细说了,至于 ...

  5. LintCode-三数之和 II

    题目描述: 给一个包含n个整数的数组S, 找到和与给定整数target最接近的三元组,返回这三个数的和. 注意事项 只需要返回三元组之和,无需返回三元组本身 样例 例如S = .  和最接近1的三元组 ...

  6. 用Mediawiki做百科网站资源大参考

    MediaWiki简易安装教程**关于mediawiki 一些好的资料: http://codex.wordpress.org.cn/Mediawiki%E5%BB%BA%E7%AB%99%E7%BB ...

  7. Android 实现简单天气应用

    引导页面,多个城市的天气,可以通过滑动来翻阅. 先看下截图: 1.城市天气界面 2.引导界面 应用引导页面 package org.qxj.iweather.page; import org.qxj. ...

  8. Libev学习笔记2

    这一节根据官方文档给出的简单示例,深入代码内部,了解其实现机制.示例代码如下: int main (void) { struct ev_loop *loop = EV_DEFAULT; ev_io_i ...

  9. POJ1797 Heavy Transportation 【Dijkstra】

    Heavy Transportation Time Limit: 3000MS   Memory Limit: 30000K Total Submissions: 21037   Accepted:  ...

  10. MySQL几种方法的数据库备份

    MySQL有几个方法来备份 最近博客一直想写点.可是不知道写什么,感觉自己近期的知识没有什么添加,今天想到了一篇能够写的博客.曾经试过依据data目录备份MySQL.可是从来没有成功过.前几天帮助朋友 ...