filter

语法：

filter：<filter>+

适用于：所有元素

继承性：无

动画性：是

计算值：指定值

取值：

<filter>：要使用的滤镜效果。多个滤镜之间用空格隔开。

说明：

设置或检索对象所应用的滤镜效果。

最常用的滤镜效果是不透明效果，如果要实现50%的不透明度（其它高级浏览器的实现参阅opacity）：
示例代码：
```
div{filter:alpha(opacity=50);}
 /* for ie8 and earlier */
div{opacity:.5;}
 /* for ie9 and other browsers */
```
以上2段代码的效果相同
对应的脚本特性为filter。

color: #2b2b2b; font-family: arial,sans-serif; color: #2b2b2b; font-family: arial,sans-serif; color: #2b2b2b; font-family: arial,sans-serif;">滤镜元素(SVG filter element)。

The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clonehttps://github.com/mdn/interactive-examplesand send us a pull request.

语法

/* url to svg filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.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%);

/* multiple filters */
filter: contrast(175%) brightness(3%);

/* global values */
filter: inherit;
filter: initial;
filter: unset;

设置一种函数，方法如下：

filter: <filter-function> [<filter-function>]*  |  none

给SVG元素<filter>引用滤镜，如下：

filter: url(svg-url#element-id)

插值

如果起始和结束过滤器都有一个不含<url>的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是none则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。

形式语法

none  |  <filter-function-list>where 
<filter-function-list> = [ <filter-function>  |  <url> ]+where 
<filter-function> = <blur()>  |  <brightness()>  |  <contrast()>  |  <drop-shadow()>  |  <grayscale()>  |  <hue-rotate()>  |  <invert()>  |  <opacity()>  |  <saturate()>  |  <sepia()>where 
<blur()> = blur( <length> )
<brightness()> = brightness( <number-percentage> )
<contrast()> = contrast( [ <number-percentage> ] )
<drop-shadow()> = drop-shadow( <length>{2,3}
 <color>? )
<grayscale()> = grayscale( <number-percentage> )
<hue-rotate()> = hue-rotate( <angle> )
<invert()> = invert( <number-percentage> )
<opacity()> = opacity( [ <number-percentage> ] )
<saturate()> = saturate( <number-percentage> )
<sepia()> = sepia( <number-percentage> )where 
<number-percentage> = <number>  |  <percentage>
<color> = <rgb()>  |  <rgba()>  |  <hsl()>  |  <hsla()>  |  <hex-color>  |  <named-color>  |  currentcolor  |  <deprecated-system-color>where 
<rgb()> = rgb( <percentage>{3}
 [ / <alpha-value> ]? )  |  rgb( <number>{3}
 [ / <alpha-value> ]? )  |  rgb( <percentage>#{3}
 , <alpha-value>? )  |  rgb( <number>#{3}
 , <alpha-value>? )
<rgba()> = rgba( <percentage>{3}
 [ / <alpha-value> ]? )  |  rgba( <number>{3}
 [ / <alpha-value> ]? )  |  rgba( <percentage>#{3}
 , <alpha-value>? )  |  rgba( <number>#{3}
 , <alpha-value>? )
<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? )  |  hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )
<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? )  |  hsla( <hue>, <percentage>, <percentage>, <alpha-value>? )where 
<alpha-value> = <number>  |  <percentage>
<hue> = <number>  |  <angle>

实例

下面的例子是使用预设的滤镜函数。每个函数都有特定的例子.

.mydiv { filter: grayscale(50%) }

/* gray all images by 50% and blur by 10px */
img {
  filter: grayscale(0.5) blur(10px);
}

下面的例子展示：通过url函数引入一个svg资源.

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

函数

使用CSS滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回“none“。除特殊说明外，函数的值如果接受百分比值（如34%），那么该函数也接受小数值（如0.34）。

`url()`

URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.

filter: url(resources.svg#c1)

`blur()`

给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。

filter: blur(5px)

  <table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td>
      <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3710/test_form_2.jpg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg id="img3" viewbox="0 0 233 176">
  <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%" >
    <fegaussianblur in="sourcegraphic" stddeviation="5" />
  </filter>
  <image xlink:href="/files/3710/test_form_2.jpeg" filter="url(#svgblur)" x="5%" y="5%" width="212px" height="161px" />
</svg><div></td>
      <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3711/test_form_2_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter:blur(5px);
  -webkit-filter:blur(5px);
  -o-filter:blur(5px);
  -ms-filter:blur(5px);
  filter:blur(5px); }
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  height: 100%;
  width: 85%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3 {
  height:100%;
}

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter id="svgblur" x="-5%" y="-5%" width="110%" height="110%">
    <fegaussianblur in="sourcegraphic" stddeviation="5"/>
  </filter>
</svg>

`brightness()`

给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。

filter: brightness(0.5)

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter >
    <fecomponenttransfer>
        <fefuncr type="linear" slope="[amount]"/>
        <fefuncg type="linear" slope="[amount]"/>
        <fefuncb type="linear" slope="[amount]"/>
    </fecomponenttransfer>
  </filter>
</svg>

<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form.jpg" id="img1" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td>
      <td><img alt="test_form.jpg" id="img2" class="internal default" src="/files/3708/test_form.jpg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 286 217">
 <filter id="brightness">
    <fecomponenttransfer>
        <fefuncr type="linear" slope="2"/>
        <fefuncg type="linear" slope="2"/>
        <fefuncb type="linear" slope="2"/>
    </fecomponenttransfer>
  </filter>
  <image xlink:href="/files/3708/test_form.jpg" filter="url(#brightness)" width="286px" height="217px" />
</svg><div></td>
      <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3709/test_form_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter:brightness(2);
  -webkit-filter:brightness(2);
  -o-filter:brightness(2);
  -ms-filter:brightness(2);
  filter:brightness(2); }
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  height:100%;
  width: 85%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3 {
  height:100%;
}

`contrast()`

调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。

filter: contrast(200%)

<svg height="0" xmlns="http://www.w3.org/2000/svg">
  <filter >
    <fecomponenttransfer>
      <fefuncr type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <fefuncg type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
      <fefuncb type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/>
    </fecomponenttransfer>
  </filter>
</svg>

<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form_3.jpeg" id="img1" class="internal default" src="/files/3712/test_form_3.jpeg" style="width: 100%;" /></td>
      <td><img alt="test_form_3.jpg" id="img2" class="internal default" src="/files/3712/test_form_3.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 240 151">
 <filter id="contrast">
    <fecomponenttransfer>
      <fefuncr type="linear" slope="2" intercept="-0.5"/>
      <fefuncg type="linear" slope="2" intercept="-0.5"/>
      <fefuncb type="linear" slope="2" intercept="-0.5"/>
    </fecomponenttransfer>
  </filter>
  <image xlink:href="/files/3712/test_form_3.jpeg" filter="url(#contrast)" width="240px" height="151px" />
</svg><div></td>
      <td><img alt="test_form_s.jpg" id="img4" class="internal default" src="/files/3713/test_form_3_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter:contrast(200%);
  -webkit-filter:contrast(200%);
  -o-filter:contrast(200%);
  -ms-filter:contrast(200%);
  filter:contrast(200%); }
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3 {
  height:100%;
}

`drop-shadow()`

给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。函数接受<shadow>（在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的box-shadowbox-shadow属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<shadow>参数如下：

<offset-x><offset-y>(必须)
这是设置阴影偏移量的两个<length>值.<offset-x> 设定水平方向距离。负值会使阴影出现在元素左边.<offset-y>设定垂直距离。负值会使阴影出现在元素上方。.查看<length>可能的单位.
如果两个值都是0,则阴影出现在元素正后面(如果设置了 <blur-radius> and/or <spread-radius>，会有模糊效果).
<blur-radius>(可选)
这是第三个<length>值。值越大，越模糊，则阴影会变得更大更淡。不允许负值若未设定，默认是0 (则阴影的边界很锐利).
<spread-radius>(可选)
这是第四个<length>值。正值会使阴影扩张和变大，负值会是阴影缩小。若未设定，默认是0 (阴影会与元素一样大小).
注意: Webkit,以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。
<color>(可选)
查看<color>该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto(Opera)和Trident(Internet Explorer)中，会应用color属性的值。另外，如果颜色值省略，WebKit中阴影是透明的。

filter: drop-shadow(16px 16px 10px black)

<svg height="0" xmlns="http://www.w3.org/2000/svg">
 <filter >
    <fegaussianblur in="sourcealpha" stddeviation="[radius]"/>
    <feoffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/>
    <feflood flood-color="[color]"/>
    <fecomposite in2="offsetblur" operator="in"/>
    <femerge>
      <femergenode/>
      <femergenode in="sourcegraphic"/>
    </femerge>
  </filter>
</svg>

<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form_4.jpeg" id="img1" class="internal default" src="/files/3714/test_form_4.jpeg" style="width: 100%;" /></td>
      <td><img alt="test_form_4.jpg" id="img2" class="internal default" src="/files/3714/test_form_4.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 239 187">
 <filter id="drop-shadow">
    <fegaussianblur in="sourcealpha" stddeviation="5"/>
    <feoffset dx="16" dy="16"/>
    <femerge>
      <femergenode/>
      <femergenode in="sourcegraphic"/>
    </femerge>
 </filter>
 <image xlink:href="/files/3714/test_form_4.jpeg" filter="url(#drop-shadow)" width="213px" height="161px" />
</svg><div></td>
      <td><img alt="test_form_4_s.jpg" id="img4" class="internal default" src="/files/3715/test_form_4_s.jpg" style="width: 100%;" /></td>
    </tr>
    <tr>
      <td><img alt="test_form_4 distorded border - original image" id="img11" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
      <td><img alt="test_form_4 distorded border - live example" id="img12" class="internal default" src="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" style="width: 100%;" /></td>
      <td>
        <div class="svg-container">
          <svg xmlns="http://www.w3.org/2000/svg" id="img13" viewbox="0 0 239 187">
            <filter id="drop-shadow2">
              <fegaussianblur in="sourcealpha" stddeviation="4"/>
              <feoffset dx="8" dy="10"/>
              <femerge>
                <femergenode/>
                <femergenode in="sourcegraphic"/>
              </femerge>
            </filter>
            <image xlink:href="/files/8467/test_form_4_irregular-shape_opacity-gradient.png" filter="url(#drop-shadow2)" width="213px" height="161px" />
          </svg>
        <div>
      </td>
      <td><img alt="test_form_4 distorded border drop shadow - static example" id="img14" class="internal default" src="/files/8469/test_form_4_irregular-shape_opacity-gradient_drop-shadow.png" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter: drop-shadow(16px 16px 10px black);
  -webkit-filter: drop-shadow(16px 16px 10px black);
  -o-filter: drop-shadow(16px 16px 10px black);
  -ms-filter: drop-shadow(16px 16px 10px black);
  filter: drop-shadow(16px 16px 10px black);
}
#img12 {
  width:100%;
  height:auto;
  -moz-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
  -webkit-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
  -o-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
  -ms-filter: drop-shadow(8px 9px 5px rgba(0,0,0,.8));
  filter: ;
}
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
#irregular-shape {
  width: 64%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3, #img13 {
  height:100%;
}

`grayscale()`

将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。

filter: grayscale(100%)

<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form_5.jpeg" id="img1" class="internal default" src="/files/3716/test_form_5.jpeg" style="width: 100%;" /></td>
      <td><img alt="test_form_5.jpg" id="img2" class="internal default" src="/files/3716/test_form_5.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 184">
 <filter id="grayscale">
    <fecolormatrix type="matrix"
               values="0.2126 0.7152 0.0722 0 0
                       0.2126 0.7152 0.0722 0 0
                       0.2126 0.7152 0.0722 0 0
                       0 0 0 1 0"/>
  </filter>
  <image xlink:href="/files/3716/test_form_5.jpeg" filter="url(#grayscale)" width="276px" height="184px" />
</svg><div></td>
      <td><img alt="test_form_5_s.jpg" id="img4" class="internal default" src="/files/3717/test_form_5_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -o-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  filter:grayscale(100%); }
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3 {
  height:100%;
}

`hue-rotate()`

给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。

filter: hue-rotate(90deg)

<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form_6.jpeg" id="img1" class="internal default" src="/files/3718/test_form_6.jpeg" style="width: 100%;" /></td>
      <td><img alt="test_form_6.jpg" id="img2" class="internal default" src="/files/3718/test_form_6.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 266 190">
 <filter id="hue-rotate">
    <fecolormatrix type="huerotate"
               values="90"/>
  </filter>
  <image xlink:href="/files/3718/test_form_6.jpeg" filter="url(#hue-rotate)" width="266px" height="190px" />
</svg><div></td>
      <td><img alt="test_form_6_s.jpg" id="img4" class="internal default" src="/files/3719/test_form_6_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter:hue-rotate(90deg);
  -webkit-filter:hue-rotate(90deg);
  -o-filter:hue-rotate(90deg);
  -ms-filter:hue-rotate(90deg);
  filter:hue-rotate(90deg); }
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3 {
  height:100%;
}

`invert()`

反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。若值未设置，值默认是0。

filter: invert(100%)

<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form_7.jpeg" id="img1" class="internal default" src="/files/3720/test_form_7.jpeg" style="width: 100%;" /></td>
      <td><img alt="test_form_7.jpg" id="img2" class="internal default" src="/files/3720/test_form_7.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 183 276">
 <filter id="invert">
    <fecomponenttransfer>
        <fefuncr type="table" tablevalues="1 0"/>
        <fefuncg type="table" tablevalues="1 0"/>
        <fefuncb type="table" tablevalues="1 0"/>
    </fecomponenttransfer>
 </filter>
 <image xlink:href="/files/3720/test_form_7.jpeg" filter="url(#invert)" width="183px" height="276px" />
</svg><div></td>
      <td><img alt="test_form_7_s.jpg" id="img4" class="internal default" src="/files/3721/test_form_7_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter: invert(100%);
  -webkit-filter: invert(100%);
  -o-filter: invert(100%);
  -ms-filter: invert(100%);
  filter: invert(100%); }
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3 {
  height:100%;
}

`opacity()`

转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

filter: opacity(50%)

<table class="standard-table">
  <thead>
    <tr>
      <th align="left" scope="col">original image</th>
      <th align="left" scope="col">live example</th>
      <th align="left" scope="col">svg equivalent</th>
      <th align="left" scope="col">static example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><img alt="test_form_14.jpeg" id="img1" class="internal default" src="/files/3725/test_form_14.jpeg" style="width: 100%;" /></td>
      <td><img alt="test_form_14.jpg" id="img2" class="internal default" src="/files/3725/test_form_14.jpeg" style="width: 100%;" /></td>
      <td><div class="svg-container"><svg xmlns="http://www.w3.org/2000/svg" id="img3" viewbox="0 0 276 183">
 <filter id="opacity">
    <fecomponenttransfer>
        <fefunca type="table" tablevalues="0 0.5">
    </fecomponenttransfer>
 </filter>
 <image xlink:href="/files/3725/test_form_14.jpeg" filter="url(#opacity)" width="276px" height="183px" />
</svg><div></td>
      <td><img alt="test_form_14_s.jpg" id="img4" class="internal default" src="/files/3726/test_form_14_s.jpg" style="width: 100%;" /></td>
    </tr>
  </tbody>
</table>

html {
  height:100%;
}
body {
  font: 14px/1.286 "lucida grande","lucida sans unicode","dejavu sans",lucida,arial,helvetica,sans-serif;
  color: rgb(51, 51, 51);
  height:100%;
  overflow:hidden;
}
#img2 {
  width:100%;
  height:auto;
  -moz-filter: opacity(50%);
  -webkit-filter: opacity(50%);
  -o-filter: opacity(50%);
  -ms-filter: opacity(50%);
  filter: opacity(50%); }
table.standard-table {
  border: 1px solid rgb(187, 187, 187);
  border-collapse: collapse;
  border-spacing: 0px;
  margin: 0px 0px 1.286em;
  width: 85%;
  height: 100%;
}
table.standard-table th {
  border: 1px solid rgb(187, 187, 187);
  padding: 0px 5px;
  background: none repeat scroll 0% 0% rgb(238, 238, 238);
  text-align: left;
  font-weight: bold;
}
table.standard-table td {
  padding: 5px;
  border: 1px solid rgb(204, 204, 204);
  text-align: left;
  vertical-align: top;
  width:25%;
  height:auto;
}
#img3 {
  height:100%;
}