查看“CSS filter”的源代码


CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。

<pre>/* &lt;filter-function&gt; 值 */
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%);

/* URL */
filter: url(&quot;filters.svg#filter-id&quot;);

/* 多个滤镜 */
filter: contrast(175%) brightness(3%);
filter: drop-shadow(3px 3px red) sepia(100%) drop-shadow(-3px -3px blue);

/* 不使用滤镜 */
filter: none;

/* 全局值 */
filter: inherit;
filter: initial;
filter: revert;
filter: revert-layer;
filter: unset;</pre>
<br>

== 函数 ==

filter 属性可设置为 none 或下面列出的一个或多个函数。如果任何函数的参数无效，则该函数返回 none。除特殊说明外，函数的值如果接受百分比值（如 34%），那么该函数也接受小数值（如 0.34）。

当单个 filter 属性具有多个函数时，滤镜将按顺序依次应用。

<br>

<span id="blur"></span>
=== blur() ===

将高斯模糊应用于输入图像。

<br>

<span id="brightness"></span>
=== brightness() ===

将线性乘法器应用于输入图像，以调整其亮度。值为 0% 将创建全黑图像；值为 100% 会使输入保持不变，其他值是该效果的线性乘数。如果值大于 100% 将使图像更加明亮。

<br>

<span id="contrast"></span>
=== contrast() ===

调整输入图像的对比度。值是 0% 将使图像变灰；值是 100%，则无影响；若值超过 100% 将增强对比度。

<br>

<span id="drop-shadow"></span>
=== drop-shadow() ===

使用 <shadow> 参数沿图像的轮廓生成阴影效果。阴影语法类似于 <box-shadow>（在 CSS 背景和边框模块中定义），但不允许使用 inset 关键字以及 spread 参数。与所有 filter 属性值一样，任何在 drop-shadow() 后的滤镜同样会应用在阴影上。

<br>

<span id="grayscale"></span>
=== grayscale() ===

将图像转换为灰度图。值为 100% 则完全转为灰度图像，若为初始值 0% 则图像无变化。值在 0% 到 100% 之间，则是该效果的线性乘数。

<br>

<span id="hue-rotate-en-us"></span>
=== hue-rotate() (en-US) ===

应用色相旋转。<angle> 值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。

<br>

<span id="invert-en-us"></span>
=== invert() (en-US) ===

反转输入图像。值为 100% 则图像完全反转，值为 0% 则图像无变化。值在 0% 和 100% 之间，则是该效果的线性乘数。

<br>

<span id="opacity"></span>
=== opacity() ===

应用透明度。值为 0% 则使图像完全透明，值为 100% 则图像无变化。

<br>

<span id="saturate-en-us"></span>
=== saturate() (en-US) ===

改变图像饱和度。值为 0% 则是完全不饱和，值为 100% 则图像无变化。超过 100% 则增加饱和度。

<br>

<span id="sepia-en-us"></span>
=== sepia() (en-US) ===

将图像转换为深褐色。值为 100% 则完全是深褐色的，值为 0% 图像无变化。

<br>

== 形式语法 ==

<pre>filter = 
  none                 |
  &lt;filter-value-list&gt;  

&lt;filter-value-list&gt; = 
  [ &lt;filter-function&gt; | &lt;url&gt; ]+  

&lt;filter-function&gt; = 
  &lt;blur()&gt;         |
  &lt;brightness()&gt;   |
  &lt;contrast()&gt;     |
  &lt;drop-shadow()&gt;  |
  &lt;grayscale()&gt;    |
  &lt;hue-rotate()&gt;   |
  &lt;invert()&gt;       |
  &lt;opacity()&gt;      |
  &lt;sepia()&gt;        |
  &lt;saturate()&gt;     

&lt;url&gt; = 
  &lt;url()&gt;  |
  &lt;src()&gt;  

&lt;blur()&gt; = 
  blur( &lt;length&gt;? )  

&lt;brightness()&gt; = 
  brightness( [ &lt;number&gt; | &lt;percentage&gt; ]? )  

&lt;contrast()&gt; = 
  contrast( [ &lt;number&gt; | &lt;percentage&gt; ]? )  

&lt;drop-shadow()&gt; = 
  drop-shadow( [ &lt;color&gt;? &amp;&amp; &lt;length&gt;{2,3} ] )  

&lt;grayscale()&gt; = 
  grayscale( [ &lt;number&gt; | &lt;percentage&gt; ]? )  

&lt;hue-rotate()&gt; = 
  hue-rotate( [ &lt;angle&gt; | &lt;zero&gt; ]? )  

&lt;invert()&gt; = 
  invert( [ &lt;number&gt; | &lt;percentage&gt; ]? )  

&lt;opacity()&gt; = 
  opacity( [ &lt;number&gt; | &lt;percentage&gt; ]? )  

&lt;sepia()&gt; = 
  sepia( [ &lt;number&gt; | &lt;percentage&gt; ]? )  

&lt;saturate()&gt; = 
  saturate( [ &lt;number&gt; | &lt;percentage&gt; ]? )  

&lt;url()&gt; = 
  url( &lt;string&gt; &lt;url-modifier&gt;* )  |
  &lt;url-token&gt;                      

&lt;src()&gt; = 
  src( &lt;string&gt; &lt;url-modifier&gt;* )  </pre>
<br>