filter CSS filter 属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。 有几个 函数 (例如 blur() 和 contrast() )可以帮助你实现预定义的效果。 尝试一下 </div></section><section aria-labelledby="语法"><h2 id="语法"><a href="#语法">语法</a></h2><div class="section-content"><div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>/* <filter-function> 值 */ 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("filters.svg#filter-id"); /* 多个滤镜 */ 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; <p>可以使用如下方法设置函数:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: <filter-function> [<filter-function>]* | none; <p>你可以使用 <code>url()</code> 来引用 <a href="/zh-CN/docs/Web/SVG/Element/filter">SVG 滤镜元素</a>。可以使用如下语法引用 SVG <a href="/zh-CN/docs/Web/SVG/Element/filter"><code><filter></code></a> 元素:</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: url(file.svg#filter-element-id); </code></pre></div></div></section><section aria-labelledby="函数"><h2 id="函数"><a href="#函数">函数</a></h2><div class="section-content"><p><code>filter</code> 属性可设置为 <code>none</code> 或下面列出的一个或多个函数。如果任何函数的参数无效,则该函数返回 <code>none</code>。除特殊说明外,函数的值如果接受百分比值(如 <code>34%</code>),那么该函数也接受小数值(如 <code>0.34</code>)。</p> <p>当单个 <code>filter</code> 属性具有多个函数时,滤镜将按顺序依次应用。</p> <dt id="blur"><a href="/zh-CN/docs/Web/CSS/filter-function/blur"><code>blur()</code></a></dt> <p>将高斯模糊应用于输入图像。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: blur(5px); <dt id="brightness"><a href="/zh-CN/docs/Web/CSS/filter-function/brightness"><code>brightness()</code></a></dt> <p>将线性乘法器应用于输入图像,以调整其亮度。值为 <code>0%</code> 将创建全黑图像;值为 <code>100%</code> 会使输入保持不变,其他值是该效果的线性乘数。如果值大于 <code>100%</code> 将使图像更加明亮。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: brightness(2); <dt id="contrast"><a href="/zh-CN/docs/Web/CSS/filter-function/contrast"><code>contrast()</code></a></dt> <p>调整输入图像的对比度。值是 <code>0%</code> 将使图像变灰;值是 <code>100%</code>,则无影响;若值超过 <code>100%</code> 将增强对比度。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: contrast(200%); <dt id="drop-shadow"><a href="/zh-CN/docs/Web/CSS/filter-function/drop-shadow"><code>drop-shadow()</code></a></dt> <p>使用 <code><shadow></code> 参数沿图像的轮廓生成阴影效果。阴影语法类似于 <code><box-shadow></code>(在 <a href="/zh-CN/docs/Web/CSS/CSS_backgrounds_and_borders">CSS 背景和边框模块</a>中定义),但不允许使用 <code>inset</code> 关键字以及 <code>spread</code> 参数。与所有 <code>filter</code> 属性值一样,任何在 <code>drop-shadow()</code> 后的滤镜同样会应用在阴影上。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: drop-shadow(16px 16px 10px black); <dt id="grayscale"><a href="/zh-CN/docs/Web/CSS/filter-function/grayscale"><code>grayscale()</code></a></dt> <p>将图像转换为灰度图。值为 <code>100%</code> 则完全转为灰度图像,若为初始值 <code>0%</code> 则图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间,则是该效果的线性乘数。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: grayscale(100%); <dt id="hue-rotate"><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/CSS/filter-function/hue-rotate"><code>hue-rotate()</code></a></dt> <p>应用色相旋转。<code><angle></code> 值设定图像会被调整的色环角度值。值为 <code>0deg</code>,则图像无变化。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: hue-rotate(90deg); <dt id="invert"><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/CSS/filter-function/invert"><code>invert()</code></a></dt> <p>反转输入图像。值为 <code>100%</code> 则图像完全反转,值为 <code>0%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间,则是该效果的线性乘数。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: invert(100%); <dt id="opacity"><a href="/zh-CN/docs/Web/CSS/filter-function/opacity"><code>opacity()</code></a></dt> <p>应用透明度。值为 <code>0%</code> 则使图像完全透明,值为 <code>100%</code> 则图像无变化。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: opacity(50%); <dt id="saturate"><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/CSS/filter-function/saturate"><code>saturate()</code></a></dt> <p>改变图像饱和度。值为 <code>0%</code> 则是完全不饱和,值为 <code>100%</code> 则图像无变化。超过 <code>100%</code> 则增加饱和度。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: saturate(200%); <dt id="sepia"><a class="only-in-en-us" title="此页面目前仅提供英文版本" href="/en-US/docs/Web/CSS/filter-function/sepia"><code>sepia()</code></a></dt> <p>将图像转换为深褐色。值为 <code>100%</code> 则完全是深褐色的,值为 <code>0%</code> 图像无变化。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: sepia(100%); </dl></div></section><section aria-labelledby="组合函数"><h2 id="组合函数"><a href="#组合函数">组合函数</a></h2><div class="section-content"><p>你可以组合任意数量的函数来控制渲染。滤镜将按声明顺序依次应用。以下示例增强了图像的对比度和亮度。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>filter: contrast(175%) brightness(103%); </code></pre></div></div></section><section aria-labelledby="插值"><h3 id="插值"><a href="#插值">插值</a></h3><div class="section-content"><p>在进行动画处理时,如果起始和结束滤镜都有一个不含 <a href="/zh-CN/docs/Web/CSS/url_value"><code><url()></code></a> 的相同长度的函数列表,则会根据其指定的规则对其每个滤镜函数进行<a href="/zh-CN/docs/Glossary/Interpolation">插值</a>。</p> <p>如果它们的长度不同,较长列表中缺少的等效滤镜函数将以其初始的、未被滤镜修改的值为参数被添加到较短列表的尾部,然后所有的滤镜函数根据其指定的规则插值。否则,将使用离散插值。</p></div></section><section aria-labelledby="形式定义"><h2 id="形式定义"><a href="#形式定义">形式定义</a></h2><div class="section-content"><figure class="table-container"><table class="properties"><tbody><tr><th scope="row"><a href="/zh-CN/docs/Web/CSS/initial_value">初始值</a></th><td><code>none</code></td></tr><tr><th scope="row">适用元素</th><td>all elements; In SVG, it applies to container elements excluding the <a href="/zh-CN/docs/Web/SVG/Element/defs"><code>defs</code></a> element and all graphics elements</td></tr><tr><th scope="row"><a href="/zh-CN/docs/Web/CSS/Inheritance">是否是继承属性</a></th><td>否</td></tr><tr><th scope="row"><a href="/zh-CN/docs/Web/CSS/computed_value">计算值</a></th><td>as specified</td></tr><tr><th scope="row"><a href="/zh-CN/docs/Web/CSS/CSS_animated_properties">动画类型</a></th><td>a <a href="/en-US/docs/Web/CSS/filter#interpolation" title="If both filters have a function list of same length without URL, each of their filters functions is interpolated according to its specific rules. If they have different lengths, the missing equivalent filter functions from the longer list are added to the end of the shorter list using their default values, then all filter functions are interpolated according to their specific rules. If one filter is 'none', it is replaced with the filter functions list of the other one using the filter function default values, then all filter functions are interpolated according to their specific rules. Otherwise discrete interpolation is used.">filter function list</a></td></tr></tbody></table></figure></div></section><section aria-labelledby="形式语法"><h2 id="形式语法"><a href="#形式语法">形式语法</a></h2><div class="section-content"><pre class="notranslate"><span class="token property" id="filter">filter = </span><br/> <span class="token keyword">none</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><filter-value-list></span> <br/><br/><span class="token property" id="<filter-value-list>"><filter-value-list> = </span><br/> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <span class="token property"><filter-function></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <span class="token property"><url></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#plus" title="加号:该实体可以出现一次或多次">+</a> <br/><br/><span class="token property" id="<filter-function>"><filter-function> = </span><br/> <span class="token property"><blur()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><brightness()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><contrast()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><drop-shadow()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><grayscale()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><hue-rotate()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><invert()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><opacity()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><sepia()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><saturate()></span> <br/><br/><span class="token property" id="<url>"><url> = </span><br/> <span class="token property"><url()></span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <span class="token property"><src()></span> <br/><br/><span class="token property" id="<blur()>"><blur()> = </span><br/> <span class="token function">blur(</span> <a href="/zh-CN/docs/Web/CSS/length"><span class="token property"><length></span></a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<brightness()>"><brightness()> = </span><br/> <span class="token function">brightness(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/number"><span class="token property"><number></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/percentage"><span class="token property"><percentage></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<contrast()>"><contrast()> = </span><br/> <span class="token function">contrast(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/number"><span class="token property"><number></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/percentage"><span class="token property"><percentage></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<drop-shadow()>"><drop-shadow()> = </span><br/> <span class="token function">drop-shadow(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/color_value"><span class="token property"><color></span></a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#double_ampersand" title="“与”组合符:必须存在所有实体,顺序不限">&&</a> <a href="/zh-CN/docs/Web/CSS/length"><span class="token property"><length></span></a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#curly_braces" title="花括号:包含两个整数,定义实体的最少和最多出现次数;或包含单个整数,定义所需的确切数量">{2,3}</a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<grayscale()>"><grayscale()> = </span><br/> <span class="token function">grayscale(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/number"><span class="token property"><number></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/percentage"><span class="token property"><percentage></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<hue-rotate()>"><hue-rotate()> = </span><br/> <span class="token function">hue-rotate(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/angle"><span class="token property"><angle></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/zero" class="page-not-created" title="This is a link to an unwritten page"><span class="token property"><zero></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<invert()>"><invert()> = </span><br/> <span class="token function">invert(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/number"><span class="token property"><number></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/percentage"><span class="token property"><percentage></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<opacity()>"><opacity()> = </span><br/> <span class="token function">opacity(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/number"><span class="token property"><number></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/percentage"><span class="token property"><percentage></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<sepia()>"><sepia()> = </span><br/> <span class="token function">sepia(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/number"><span class="token property"><number></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/percentage"><span class="token property"><percentage></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<saturate()>"><saturate()> = </span><br/> <span class="token function">saturate(</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">[</a> <a href="/zh-CN/docs/Web/CSS/number"><span class="token property"><number></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a> <a href="/zh-CN/docs/Web/CSS/percentage"><span class="token property"><percentage></span></a> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#brackets" title="方括号:将多个实体、组合符号和数量符号组合在一起,将它们转换为单个组件">]</a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#question_mark" title="问号:该实体是可选的">?</a> <span class="token function">)</span> <br/><br/><span class="token property" id="<url()>"><url()> = </span><br/> <span class="token function">url(</span> <a href="/zh-CN/docs/Web/CSS/string"><span class="token property"><string></span></a> <a href="/zh-CN/docs/Web/CSS/url-modifier" class="page-not-created" title="This is a link to an unwritten page"><span class="token property"><url-modifier></span></a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#asterisk" title="星号:该实体可以出现零次、一次或多次">*</a> <span class="token function">)</span> <a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#single_bar" title="“互斥”组合符:必须恰好存在其中的一个实体">|</a><br/> <a href="/zh-CN/docs/Web/CSS/url-token" class="page-not-created" title="This is a link to an unwritten page"><span class="token property"><url-token></span></a> <br/><br/><span class="token property" id="<src()>"><src()> = </span><br/> <span class="token function">src(</span> <a href="/zh-CN/docs/Web/CSS/string"><span class="token property"><string></span></a> <a href="/zh-CN/docs/Web/CSS/url-modifier" class="page-not-created" title="This is a link to an unwritten page"><span class="token property"><url-modifier></span></a><a href="/zh-CN/docs/Web/CSS/Value_definition_syntax#asterisk" title="星号:该实体可以出现零次、一次或多次">*</a> <span class="token function">)</span> <br/><br/></pre></div></section><section aria-labelledby="示例"><h2 id="示例"><a href="#示例">示例</a></h2><div class="section-content"/></section><section aria-labelledby="应用_filter_函数"><h3 id="应用_filter_函数"><a href="#应用_filter_函数">应用 filter 函数</a></h3><div class="section-content"><p><code>filter</code> 属性被应用于第二张图片,为其本身以及边框添加灰度和模糊效果。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>img { border: 5px solid yellow; /* 为第二张图像应用 40% 灰度并以 5px 进行模糊 */ img:nth-of-type(2) { filter: grayscale(0.4) blur(5px); <div class="code-example"><div class="example-header"><span class="language-name">html</span></div><pre class="brush: html notranslate"><code><img src="pencil.jpg" alt="原图清晰" /> <img src="pencil.jpg" alt="该图像及其边框被应用了模糊和灰度效果" /> </code></pre></div><div class="code-example" id="sect1"><div class="example-header" id="sect2"/><iframe class="sample-code-frame" title="应用 filter 函数 sample" id="frame_应用_filter_函数" width="100%" height="229px" src="https://live.mdnplay.dev/zh-CN/docs/Web/CSS/filter/runner.html?id=%E5%BA%94%E7%94%A8_filter_%E5%87%BD%E6%95%B0" sandbox="allow-same-origin allow-scripts" loading="lazy"/></div></div></section><section aria-labelledby="重复滤镜函数"><h3 id="重复滤镜函数"><a href="#重复滤镜函数">重复滤镜函数</a></h3><div class="section-content"><p>滤镜函数按出现顺序应用。可以重复相同的滤镜函数。</p> <div class="code-example"><div class="example-header"><span class="language-name">css</span></div><pre class="brush: css notranslate"><code>#MDN-logo { border: 1px solid blue; filter: drop-shadow(5px 5px 0 red) hue-rotate(180deg) drop-shadow(5px 5px 0 red); id="MDN-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 361 104.2" xml:space="preserve" role="img"> <title>MDN Web Docs</title> d="M197.6 73.2h-17.1v-5.5h3.8V51.9c0-3.7-.7-6.3-2.1-7.9-1.4-1.6-3.3-2.3-5.7-2.3-3.2 0-5.6 1.1-7.2 3.4s-2.4 4.6-2.5 6.9v15.6h6v5.5h-17.1v-5.5h3.8V51.9c0-3.8-.7-6.4-2.1-7.9-1.4-1.5-3.3-2.3-5.6-2.3-3.2 0-5.5 1.1-7.2 3.3-1.6 2.2-2.4 4.5-2.5 6.9v15.8h6.9v5.5h-20.2v-5.5h6V42.4h-6.1v-5.6h13.4v6.4c1.2-2.1 2.7-3.8 4.7-5.2 2-1.3 4.4-2 7.3-2s5.3.7 7.5 2.1c2.2 1.4 3.7 3.5 4.5 6.4 1.1-2.5 2.7-4.5 4.9-6.1s4.8-2.4 7.9-2.4c3.5 0 6.5 1.1 8.9 3.3s3.7 5.6 3.7 10.2v18.2h6.1v5.5zm42.5 0h-13.2V66c-1.2 2.2-2.8 4.1-4.9 5.6-2.1 1.6-4.8 2.4-8.3 2.4-4.8 0-8.7-1.6-11.6-4.9-2.9-3.2-4.3-7.7-4.3-13.3 0-5 1.3-9.6 4-13.7 2.6-4.1 6.9-6.2 12.8-6.2s9.8 2.2 12.3 6.5V22.7h-8.6v-5.6h15.8v50.6h6v5.5zm-13.3-16.8V52c-.1-3-1.2-5.5-3.2-7.3s-4.4-2.8-7.2-2.8c-3.6 0-6.3 1.3-8.2 3.9-1.9 2.6-2.8 5.8-2.8 9.6 0 4.1 1 7.3 3 9.5s4.5 3.3 7.4 3.3c3.2 0 5.8-1.3 7.8-3.8 2.1-2.6 3.1-5.3 3.2-8zm61.5 16.8H269v-5.5h6V51.9c0-3.7-.7-6.3-2.2-7.9-1.4-1.6-3.4-2.3-5.7-2.3-3.1 0-5.6 1-7.4 3s-2.8 4.4-2.9 7v15.9h6v5.5h-19.3v-5.5h6V42.4h-6.2v-5.6h13.6V43c2.6-4.6 6.8-6.9 12.7-6.9 3.6 0 6.7 1.1 9.2 3.3s3.7 5.6 3.7 10.2v18.2h6v5.4h-.2z" style="fill: var(--text-primary);"></path> <g style="fill:blue;"> d="M42 .2 13.4 92.3H1.7L30.2.2H42zM52.4.2v92.1H42V.2h10.4zm40.3 0L64.2 92.3H52.5L81 .2h11.7zM103.1.2v92.1H92.7V.2h10.4zM294 95h67v8.8h-67V95z"></path> <p>滤镜函数按顺序应用。这就是阴影颜色不同的原因:第一个阴影的色调被 <code>hue-rotate()</code> 函数改变,而第二个阴影的色调没有被改变。</p></div></section><h2 id="规范"><a href="#规范">规范</a></h2><table class="standard-table"><thead><tr><th scope="col">Specification</th></tr></thead><tbody><tr><td><a href="https://drafts.fxtf.org/filter-effects/#FilterProperty">Filter Effects Module Level 1<!-- --> <br/><small># <!-- -->FilterProperty</small></a></td></tr></tbody></table><h2 id="浏览器兼容性"><a href="#浏览器兼容性">浏览器兼容性</a></h2><p>BCD tables only load in the browser</p><noscript> <!-- -->with JavaScript enabled. Enable JavaScript to view data.</noscript><section aria-labelledby="参见"><h2 id="参见"><a href="#参见">参见</a></h2><div class="section-content"><ul>