CSS3: 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: &lt;filter-function&gt; [&lt;filter-function&gt;]* | 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(): 给图像设置一个阴影效果, 阴影是合成在图像下方的, 可以设置模糊度, 可以用特定颜色画出遮罩图的偏移版本. 函数能接受&lt;shadow&gt;(在 CSS3 背景中定义)类型的值, 除了 inset 关键字不可使用, 与 box-shadow 属性很相似.

不过通过滤镜, 一些浏览器会提供硬件加速

参数如下:

&lt;offset-x&gt;和&lt;offset-y&gt; (不可省略)

&lt;blur-radius&gt;(可选)

&lt;spread-radius&gt;(可选)

&lt;color&gt;(可选)
`</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%);