英语原文: MDN:filter
总结
Filter 属性用于实现”模糊”, “锐化”, “颜色替换”等图像渲染效果.
Filter 通常用于调整图像, 背景, 边框的呈现.
语法
filter: url("filter.svg#filter-id");
filter:blur(5px);
filter:brightness(.4);
filter:contrast(200%);
filter:drop-shadow(16px 16px 20px blue);
filter:grayscale(50%);
filter:hue-rotate(90deg);
filter:invert(75%);
filter:opacity(25%);
filter:saturate(30%);
filter:sepia(60%);
/*Apply multiple filters*/
filter: contrast(75%) brightness(3%);
/*Global Values*/
filter: inherit;
filter:initial;
filter:unset;
`</pre>
### 设置一种函数
<pre>`filter: <filter-function> [<filter-function>]* | none
`</pre>
### 给 SVG 元素 <filter> 引用滤镜
<pre>`filter: url(svg-url#element-id)
`</pre>
### 实例
<pre>`.mydiv{filter:grayscale(50%)}
/*gray all images by 50% and blur by 10px*/
img{
filter: grayscale(.5) blur(10px);
}
`</pre>
#### 通过 url 函数引入一个 SVG 资源
<pre>`.target{filter:url(#c1):}
.mydiv{filter:url(commonfilters.xml#large-blur)}
`</pre>
### 函数
参数可以传入百分数或小数, 34%和.34效果相同
<pre>`url(): 接受一个 XML 文件, 该文件设置一个 SVG 滤镜, 并通过锚点确定一个具体的滤镜元素
filter: url(resource.svg#c1)
`</pre>
<pre>`blur(): 接收 radius 值为图像设置高斯模糊, radius 为标准差(px), 默认为0, 不接收百分比
`</pre>
<pre>`brightness(): 给图片应用一种线性惩罚, 使其看起来更亮或更暗, 0%对应全黑, 100%对应原图, 超过100%更亮, 默认为1;
`</pre>
<pre>`contrast(): 调整图像对比度, 0对应全黑, 1对应原图, 大于1则应用更低的对比度
`</pre>
<pre>`drop-shadow(): 给图像设置一个阴影效果, 阴影是合成在图像下方的, 可以设置模糊度, 可以用特定颜色画出遮罩图的偏移版本. 函数能接受<shadow>(在 CSS3 背景中定义)类型的值, 除了 inset 关键字不可使用, 与 box-shadow 属性很相似.
不过通过滤镜, 一些浏览器会提供硬件加速
参数如下:
<offset-x>和<offset-y> (不可省略)
<blur-radius>(可选)
<spread-radius>(可选)
<color>(可选)
`</pre>
<pre>`grayscale(): 将图像转为灰度图像, 1对应完全灰度图像, 0对应原图
`</pre>
<pre>`hue-rotate(): 给图像应用色相旋转, "angle" 设定图像会被调整的色环角度, 默认为0, 对应无变化.
`</pre>
<pre>`invert(): 翻转输入图像, 即反相, 1对应完全反相, 0对应原图
`</pre>
<pre>`opacity(): 转换图像的透明程度, 0对应完全透明, 1对应原图
和 CSS3 的 opacity 功能相似, 但是一些浏览器会提供硬件加速
`</pre>
<pre>`saturate(): 修改图像饱和度, 0对应完全不饱和, 1对应原图
`</pre>
<pre>`sepia(): 将图像转为深褐色, 1对应完全深褐色, 0对应原图
复合函数
filter: contrast(175%) brightness(3%);