---
title: <filter-function>
slug: Web/CSS/filter-function
tags:
  - CSS
  - CSS Data Type
  - Filter Effects
  - NeedsCompatTable
  - NeedsTranslation
  - Reference
  - TopicStub
translation_of: Web/CSS/filter-function
---
<div>{{cssref}}</div>

<p> <code><strong>&lt;filter-function&gt;</strong></code> <a href="/zh-CN/docs/Web/CSS">CSS</a> <a href="/zh-CN/docs/Web/CSS/CSS_Types">数据类型</a> 代表可以改变输入图像外观的图形效果。它可以用于{{cssxref("filter")}} 和 {{cssxref("backdrop-filter")}} 属性。</p>

<h2 id="语法">语法</h2>

<p><code>&lt;filter-function&gt;</code> 数据类型由下列过滤器函数之一指定的。每个函数需要一个参数，如果参数无效，结果不会被改变，如同没有使用过滤器一样。</p>

<dl>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/blur">blur()</a></code></dt>
 <dd>模糊图像</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/brightness">brightness()</a></code></dt>
 <dd>让图像更明亮或更暗淡</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/contrast">contrast()</a></code></dt>
 <dd>增加或减少图像的对比度</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow">drop-shadow()</a></code></dt>
 <dd>在图像后方应用投影</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/grayscale">grayscale()</a></code></dt>
 <dd>将图像转为灰度图</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/hue-rotate">hue-rotate()</a></code></dt>
 <dd>改变图像的整体色调</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/invert">invert()</a></code></dt>
 <dd>反转图像颜色</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/opacity">opacity()</a></code></dt>
 <dd>改变图像透明度</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/saturate">saturate()</a></code></dt>
 <dd>超饱和或去饱和输入的图像</dd>
 <dt><code><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/sepia">sepia()</a></code></dt>
 <dd>将图像转为棕褐色</dd>
</dl>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">规范</th>
   <th scope="col">状态</th>
   <th scope="col">注释</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('Filters 1.0', '#typedef-filter-function', '&lt;filter-function&gt;') }}</td>
   <td>{{ Spec2('Filters 1.0') }}</td>
   <td>初始版本</td>
  </tr>
 </tbody>
</table>

<h2 id="相关参考">相关参考</h2>

<ul>
 <li>使用此数据类型的属性: {{cssxref("filter")}} 以及 {{cssxref("backdrop-filter")}}</li>
</ul>