diff options
Diffstat (limited to 'files/zh-cn/web/css')
| -rw-r--r-- | files/zh-cn/web/css/filter/index.html | 495 |
1 files changed, 126 insertions, 369 deletions
diff --git a/files/zh-cn/web/css/filter/index.html b/files/zh-cn/web/css/filter/index.html index 0bb84948cb..4b8ab9fcdb 100644 --- a/files/zh-cn/web/css/filter/index.html +++ b/files/zh-cn/web/css/filter/index.html @@ -10,9 +10,9 @@ translation_of: Web/CSS/filter --- <p>{{CSSRef}}</p> -<p><strong><code>filter </code></strong><span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。</span></p> +<p><strong><code>filter</code> </strong><span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像，背景和边框的渲染。</span></p> -<p>CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG<span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜</span>，通过一个URL链接到SVG<span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜元素</span>(<a href="/en-US/docs/Web/SVG/Element/filter" style="line-height: 1.5;" title="/en/SVG/Element/filter">SVG filter element</a>)。</p> +<p>CSS 标准里包含了一些已实现预定义效果的函数。你也可以参考一个 SVG <span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜</span>，通过一个 URL 链接到 SVG <span style="background-color: #fafafa; color: #2b2b2b; font-family: arial,sans-serif;">滤镜元素</span>(<a href="/en-US/docs/Web/SVG/Element/filter" style="line-height: 1.5;" title="/en/SVG/Element/filter">SVG filter element</a>)。</p> <div>{{EmbedInteractiveExample("pages/css/filter.html")}}</div> @@ -20,7 +20,7 @@ translation_of: Web/CSS/filter <h2 id="语法">语法</h2> -<pre class="brush:css no-line-numbers">/* URL to SVG filter */ +<pre class="brush:css no-line-numbers notranslate">/* URL to SVG filter */ filter: url("filters.svg#filter-id"); /* <filter-function> values */ @@ -38,247 +38,84 @@ filter: sepia(60%); /* Multiple filters */ filter: contrast(175%) brightness(3%); +/* Use no filter */ +filter: none; + /* Global values */ filter: inherit; filter: initial; -filter: unset; -</pre> +filter: unset;</pre> <p>设置一种函数，方法如下：</p> -<pre>filter: <filter-function> [<filter-function>]* | none +<pre class="notranslate">filter: <filter-function> [<filter-function>]* | none </pre> -<p>给SVG元素 {{ SVGElement("filter") }}引用滤镜, 如下：</p> +<p>给SVG元素 {{SVGElement("filter")}} 引用滤镜, 如下：</p> -<pre class="eval">filter: url(svg-url#element-id) -</pre> +<pre class="notranslate">filter: url(file.svg#filter-element-id)</pre> <h3 id="插值">插值</h3> -<p>如果起始和结束过滤器都有一个不含{{cssxref("<url>")}}的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是<code>none</code>则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。</p> - -<h3 id="形式语法">形式语法</h3> - -<pre>{{csssyntax}}</pre> - -<h2 id="实例">实例</h2> - -<p>下面的例子是使用预设的滤镜函数。每个函数都有特定的例子.</p> - -<pre class="brush: css">.mydiv { filter: grayscale(50%) } - -/* gray all images by 50% and blur by 10px */ -img { - filter: grayscale(0.5) blur(10px); -}</pre> - -<p>下面的例子展示：通过url函数引入一个svg资源.</p> - -<pre class="brush: css">.target { filter: url(#c1); } - -.mydiv { filter: url(commonfilters.xml#large-blur) } -</pre> +<p>如果起始和结束过滤器都有一个不含 {{cssxref("<url>")}} 的相同长度的函数列表，则会根据其指定的规则对其每个过滤器函数进行插值。如果它们的长度不同，较长列表中确实的等效过滤器函数将使用空白的值添加到较短列表的尾部，然后所有的过滤器函数根据其特定的规则插值。如果一个过滤器是<code>none</code>则会使用过滤器函数的默认值替换函数列表，然后根据特定的规则进行插值，否则使用离散插值。</p> <h2 id="函数">函数</h2> -<p>使用CSS滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回“none“。除特殊说明外，函数的值如果接受百分比值（如34%），那么该函数也接受小数值（如0.34）。</p> +<p>使用 CSS 滤镜属性，你需要设定下面某一函数的值。如果该值无效，函数返回 <code>none</code>。除特殊说明外，函数的值如果接受百分比值（如 <code>34%</code>），那么该函数也接受小数值（如0.34）。</p> -<h3 id="url()"><code>url()</code></h3> +<p>当单个 <code>filter</code> 属性具有两个或多个函数时，其结果将与将两个或多个 <code>filter</code> 属性分别应用于相同的函数时的结果不同</p> -<p>URL函数接受一个XML文件，该文件设置了 一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.</p> +<h3 id="SVG_filter">SVG filter</h3> -<pre class="brush: css">filter: url(resources.svg#c1) -</pre> +<h4 id="url">url()</h4> -<h3 id="blur()"><code>blur()</code></h3> +<p>获取指向SVG过滤器的URI，该 <a href="/zh-CN/docs/Web/SVG/Element/filter">SVG filter</a> 可以嵌入到外部XML文件中。</p> -<p><code>给图像设置高斯模糊。“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；如果没有设定值，则默认是0；这个参数可设置css长度值，但不接受百分比值。</code></p> +<pre class="brush: css notranslate">filter: url(resources.svg#c1)</pre> -<pre class="brush: css">filter: blur(5px) -</pre> +<h3 id="Filter_函数">Filter 函数</h3> -<div id="blur_example" style="display: none;"> -<pre class="brush: html"> <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></pre> +<h4 id="blur">blur()</h4> -<pre class="brush: css">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%; -} +<p>{{cssxref("filter-function/blur", "blur()")}} 函数将高斯模糊应用于输入图像。<code>radius</code> 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为<code>0</code>。该参数可以指定为 CSS 长度，但不接受百分比值。</p> + +<pre class="brush: css notranslate">filter: blur(5px) </pre> -</div> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" 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></pre> -<p>{{EmbedLiveSample('blur_example','100%','236px','')}}</p> +<p>{{EmbedLiveSample('blur_example','100%','236px','','', 'no-codepen')}}</p> -<h3 id="brightness()"><code>brightness()</code></h3> +<h4 id="brightness">brightness()</h4> -<p>给图片应用一种线性乘法，使其看起来更亮或更暗。如果值是0%，图像会全黑。值是100%，则图像无变化。其他的值对应线性乘数效果。值超过100%也是可以的，图像会比原来更亮。如果没有设定值，默认是1。</p> +<p>{{cssxref("filter-function/brightness", "brightness()")}} 函数将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 <code>0％</code> 将创建全黑图像。值为 <code>100％</code> 会使输入保持不变。其他值是效果的线性乘数。如果值大于 <code>100%</code> 提供更明亮的结果。若没有设置值，默认为 <code>1</code>。</p> -<pre class="brush: css">filter: brightness(0.5)</pre> +<pre class="brush: css notranslate">filter: brightness(2)</pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> - <filter id="brightness"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -99999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="brightness"> <feComponentTransfer> - <feFuncR type="linear" slope="[amount]"/> - <feFuncG type="linear" slope="[amount]"/> - <feFuncB type="linear" slope="[amount]"/> + <feFuncR type="linear" slope="[amount]"/> + <feFuncG type="linear" slope="[amount]"/> + <feFuncB type="linear" slope="[amount]"/> </feComponentTransfer> </filter> </svg></pre> -<div id="brightness_example" style="display: none;"> -<pre class="brush: html"><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> -</pre> +<p>{{EmbedLiveSample('brightness_example','100%','231px','','', 'no-codepen')}}</p> -<pre class="brush: css">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%; -} -</pre> -</div> - -<p>{{EmbedLiveSample('brightness_example','100%','231px','')}}</p> +<h4 id="contrast">contrast()</h4> -<h3 id="contrast()"><code>contrast()</code></h3> +<p>{{cssxref("filter-function/contrast", "contrast()")}} 函数可调整输入图像的对比度。值是 <code>0%</code> 的话，图像会全黑。值是 <code>100%</code>，图像不变。值可以超过 <code>100%</code>，意味着会运用更低的对比。若没有设置值，默认是 <code>1</code>。</p> -<p>调整图像的对比度。值是0%的话，图像会全黑。值是100%，图像不变。值可以超过100%，意味着会运用更低的对比。若没有设置值，默认是1。</p> - -<pre class="brush: css">filter: contrast(200%) +<pre class="brush: css notranslate">filter: contrast(200%) </pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg height="0" xmlns="http://www.w3.org/2000/svg"> <filter id="contrast"> <feComponentTransfer> <feFuncR type="linear" slope="[amount]" intercept="-(0.5 * [amount]) + 0.5"/> @@ -290,7 +127,7 @@ table.standard-table td { </pre> <div id="contrast_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -319,7 +156,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -365,28 +202,25 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('contrast_example','100%','203px','')}}</p> +<p>{{EmbedLiveSample('contrast_example','100%','203px','','', 'no-codepen')}}</p> -<h3 id="drop-shadow()"><code>drop-shadow()</code></h3> +<h4 id="drop-shadow">drop-shadow()</h4> -<p>给图像设置一个阴影效果。阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。 函数接受<code><shadow>（</code>在CSS3背景中定义）类型的值，除了“inset”关键字是不允许的。该函数与已有的<code>box-shadow</code> {{cssxref("box-shadow")}}属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。 <shadow>参数如下：</p> +<p>{{cssxref("filter-function/drop-shadow", "drop-shadow()")}} 函数对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 函数接受<code><shadow></code>（在CSS3背景中定义）类型的值，除了 <code>inset</code> 和 <code>spread</code> 关键字。该函数与已有的 {{cssxref("box-shadow")}} 属性很相似；不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。<code><shadow></code> 参数如下：</p> <dl> <dt><code><offset-x></code> <code><offset-y></code> <small>(必须)</small></dt> - <dd>这是设置阴影偏移量的两个 {{cssxref("<length>")}}值. <code><offset-x></code> 设定水平方向距离. 负值会使阴影出现在元素左边. <code><offset-y></code>设定垂直距离.负值会使阴影出现在元素上方。.查看 {{cssxref("<length>")}}可能的单位.<br> - <code><font face="Open Sans, sans-serif">如果两个值都是</font>0</code>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><blur-radius></code><span style="line-height: 1.5;"> and/or </span><code style="font-style: normal; line-height: 1.5;"><spread-radius>，</code><span style="line-height: 1.5;">会有模糊效果</span><span style="line-height: 1.5;">).</span></dd> + <dd>这是设置阴影偏移量的两个 {{cssxref("<length>")}} 值。 <code><offset-x></code> 设定水平方向距离，负值会使阴影出现在元素左边。 <code><offset-y></code>设定垂直距离，负值会使阴影出现在元素上方。查看 {{cssxref("<length>")}} 了解可能的单位.<br> + <font face="Open Sans, sans-serif">如果两个值都是 </font><code>0</code>, 则阴影出现在元素正后面 (如果设置了<span style="line-height: 1.5;"> </span><code style="font-style: normal; line-height: 1.5;"><blur-radius></code><span style="line-height: 1.5;"> 且/或 </span><code><spread-radius></code> 也<span style="line-height: 1.5;">会有模糊效果</span><span style="line-height: 1.5;">).</span></dd> <dt><code><blur-radius></code> <small>(可选)</small></dt> - <dd>这是第三个 {{cssxref("<length>")}}值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值 若未设定，默认是0 (则阴影的边界很锐利).</dd> - <dt><code><spread-radius></code> <small>(可选)</small></dt> - <dd>这是第四个 {{cssxref("<length>")}} 值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小). <br> - 注意: Webkit, 以及一些其他浏览器 不支持第四个长度，如果加了也不会渲染。</dd> + <dd>这是第三个 {{cssxref("<length>")}} 值。值越大，越模糊，所以阴影可以变得更大或更淡。不允许负值。若未设定，默认是 <code>0</code> (则阴影的边界很锐利)。</dd> <dt><code><color></code> <small>(可选)</small></dt> - <dd>查看 {{cssxref("<color>")}}该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中， 会应用 {{ cssxref("color") }}属性的值。另外，如果颜色值省略，WebKit中阴影是透明的。</dd> + <dd>查看 {{cssxref("<color>")}} 了解该值可能的关键字和标记。若未设定，颜色值基于浏览器 —— 通常是 {{cssxref("<color>")}} 属性的值，但请注意，在这种情况下，Safari 当前会绘制透明阴影。<s>在 Gecko (Firefox), Presto (Opera) 和 Trident (Internet Explorer) 中， 会应用 {{cssxref("<color>")}} 属性的值。另外，如果颜色值省略，WebKit 中阴影是透明的。</s></dd> </dl> -<pre class="brush: css">filter: drop-shadow(16px 16px 10px black)</pre> +<pre class="brush: css notranslate">filter: drop-shadow(16px 16px 10px black)</pre> -<pre class="brush: html"><svg height="0" xmlns="http://www.w3.org/2000/svg"> +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> <filter id="drop-shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="[radius]"/> <feOffset dx="[offset-x]" dy="[offset-y]" result="offsetblur"/> @@ -397,129 +231,18 @@ table.standard-table td { <feMergeNode in="SourceGraphic"/> </feMerge> </filter> -</svg> -</pre> - -<div id="shadow_example" style="display: none;"> -<pre class="brush: html"><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<span style="font-size: 1rem;">" filter="url(#drop-shadow2)" width="213px" height="161px" /></span> - </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> -</pre> - -<pre class="brush: css">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%; -} -</pre> -</div> +</svg></pre> -<p>{{EmbedLiveSample('shadow_example','100%','300px','')}}</p> +<p>{{EmbedLiveSample('shadow_example','100%','300px','','', 'no-codepen')}}</p> -<h3 id="grayscale()"><code>grayscale()</code></h3> +<h4 id="grayscale">grayscale()</h4> -<p>将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。</p> +<p>{{cssxref("filter-function/grayscale", "grayscale()")}} 函数将改变输入图像灰度。<code>amount</code> 的值定义了转换的比例。值为 <code>100%</code> 则完全转为灰度图像，值为 <code>0%</code> 图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间，则是效果的线性乘数。若未设置值，默认是 <code>0</code>。</p> -<pre class="brush: css">filter: grayscale(100%)</pre> +<pre class="brush: css notranslate">filter: grayscale(100%)</pre> <div id="grayscale_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -548,7 +271,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -594,16 +317,22 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('grayscale_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('grayscale_example','100%','209px','','', 'no-codepen')}}</p> -<h3 id="hue-rotate()"><code>hue-rotate()</code></h3> +<h4 id="hue-rotate">hue-rotate()</h4> -<p>给图像应用色相旋转。“angle”一值设定图像会被调整的色环角度值。值为0deg，则图像无变化。若值未设置，默认值是0deg。该值虽然没有最大值，超过360deg的值相当于又绕一圈。</p> +<p>{{cssxref("filter-function/hue-rotate", "hue-rotate()")}} 函数在输入图像上应用色相旋转。<code>angle</code> 一值设定图像会被调整的色环角度值。值为 <code>0deg</code>，则图像无变化。若值未设置值，默认为 <code>0deg</code>。该值虽然没有最大值，超过 <code>360deg</code> 的值相当于又绕一圈。</p> -<pre class="brush: css">filter: hue-rotate(90deg)</pre> +<pre class="brush: css notranslate">filter: hue-rotate(90deg)</pre> + +<pre class="brush: html notranslate"><svg style="position: absolute; top: -999999px" xmlns="http://www.w3.org/2000/svg"> + <filter id="svgHueRotate" > + <feColorMatrix type="hueRotate" values="[angle]" /> + <filter /> +</svg></pre> <div id="huerotate_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -629,7 +358,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -675,16 +404,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('huerotate_example','100%','221px','')}}</p> +<p>{{EmbedLiveSample('huerotate_example','100%','221px','','', 'no-codepen')}}</p> -<h3 id="invert()"><code>invert()</code></h3> +<h4 id="invert">invert()</h4> -<p>反转输入图像。值定义转换的比例。100%的价值是完全反转。值为0%则图像无变化。值在0%和100%之间，则是效果的线性乘子。 若值未设置，值默认是0。</p> +<p>{{cssxref("filter-function/invert", "invert()")}} 函数反转输入图像。<code>amount</code> 的值定义转换的比例。<code>100%</code> 的价值是完全反转。值为 <code>0%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间，则是效果的线性乘数。 若值未设置值，默认为 <code>0</code>。</p> -<pre class="brush: css">filter: invert(100%)</pre> +<pre class="brush: css notranslate">filter: invert(100%)</pre> <div id="invert_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -713,7 +442,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -759,16 +488,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('invert_example','100%','407px','')}}</p> +<p>{{EmbedLiveSample('invert_example','100%','407px','','', 'no-codepen')}}</p> -<h3 id="opacity()"><code>opacity()</code></h3> +<h4 id="opacity">opacity()</h4> -<p>转化图像的透明程度。值定义转换的比例。值为0%则是完全透明，值为100%则图像无变化。值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。 若值未设置，值默认是1。该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。</p> +<p>{{cssxref("filter-function/opacity", "opacity()")}} 转化图像的透明程度。<code>amount</code> 的值定义转换的比例。值为 <code>0%</code> 则是完全透明，值为 <code>100%</code> 则图像无变化。值在 <code>0%</code> 和 <code>100%</code> 之间，则是效果的线性乘数。也相当于图像样本乘以数量。 若值未设置，值默认是<code>1</code>。该函数与已有的 <code>opacity</code> 属性很相似，不同之处在于通过 <code>filter</code>，一些浏览器为了提升性能会提供硬件加速。</p> -<pre class="brush: css">filter: opacity(50%)</pre> +<pre class="brush: css notranslate">filter: opacity(50%)</pre> <div id="opacity_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -795,7 +524,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -841,16 +570,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('opacity_example','100%','210px','')}}</p> +<p>{{EmbedLiveSample('opacity_example','100%','210px','','', 'no-codepen')}}</p> -<h3 id="saturate()"><code>saturate()</code></h3> +<h4 id="saturate">saturate()</h4> -<p>转换图像饱和度。值定义转换的比例。值为0%则是完全不饱和，值为100%则图像无变化。其他值，则是效果的线性乘子。超过100%的值是允许的，则有更高的饱和度。 若值未设置，值默认是1。</p> +<p>{{cssxref("filter-function/saturate", "saturate()")}} 函数转换图像饱和度。<code>amount</code> 的值定义转换的比例。值为 <code>0%</code> 则是完全不饱和，值为 <code>100%</code> 则图像无变化。其他值是效果的线性乘数。超过 <code>100%</code> 则有更高的饱和度。 若未设置值，默认为 <code>1</code>。</p> -<pre class="brush: css">filter: saturate(200%)</pre> +<pre class="brush: css notranslate">filter: saturate(200%)</pre> <div id="saturate_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -876,7 +605,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -922,16 +651,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('saturate_example','100%','332px','')}}</p> +<p>{{EmbedLiveSample('saturate_example','100%','332px','','', 'no-codepen')}}</p> -<h3 id="sepia()"><code>sepia()</code></h3> +<h4 id="sepia">sepia()</h4> -<p>将图像转换为深褐色。值定义转换的比例。值为100%则完全是深褐色的，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0。</p> +<p> {{cssxref("filter-function/sepia", "sepia()")}} 函数将图像转换为深褐色。<code>amount</code> 的值定义转换的比例。值为 <code>100%</code> 则完全是深褐色的，值为 <code>0%</code> 图像无变化。值在 <code>0%</code> 到 <code>100%</code> 之间，值是效果的线性乘数。若未设置，值默认是 <code>0</code>。</p> -<pre class="brush: css">filter: sepia(100%)</pre> +<pre class="brush: css notranslate">filter: sepia(100%)</pre> <div id="sepia_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -960,7 +689,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -1006,16 +735,16 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('sepia_example','100%','229px','')}}</p> +<p>{{EmbedLiveSample('sepia_example','100%','229px','','', 'no-codepen')}}</p> <h2 id="复合函数">复合函数</h2> <p>你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。</p> -<pre class="brush: css">filter: contrast(175%) brightness(3%)</pre> +<pre class="brush: css notranslate">filter: contrast(175%) brightness(3%)</pre> <div id="combination_example" style="display: none;"> -<pre class="brush: html"><table class="standard-table"> +<pre class="brush: html notranslate"><table class="standard-table"> <thead> <tr> <th align="left" scope="col">Original image</th> @@ -1033,7 +762,7 @@ table.standard-table td { </table> </pre> -<pre class="brush: css">html { +<pre class="brush: css notranslate">html { height:100%; } body { @@ -1080,7 +809,37 @@ table.standard-table td { </pre> </div> -<p>{{EmbedLiveSample('combination_example','100%','209px','')}}</p> +<p>{{EmbedLiveSample('combination_example','100%','209px','','', 'no-codepen')}}</p> + +<h2 id="正式定义">正式定义</h2> + +<p>{{cssinfo}}</p> + +<h2 id="形式语法">形式语法</h2> + +<pre dir="rtl">{{csssyntax}}</pre> + +<h2 id="示例">示例</h2> + +<h3 id="应用_filter_功能">应用 filter 功能</h3> + +<p>下面显示了使用预定义功能的示例。有关特定示例，请参见每个功能。</p> + +<pre class="brush: css notranslate">.mydiv { filter: grayscale(50%) } + +/* gray all images by 50% and blur by 10px */ +img { + filter: grayscale(0.5) blur(10px); +}</pre> + +<h3 id="应用_SVG_filter">应用 SVG filter</h3> + +<p>将 URL 函数与 SVG 资源一起使用的示例如下：</p> + +<pre class="brush: css notranslate">.target { filter: url(#c1); } + +.mydiv { filter: url(commonfilters.xml#large-blur) } +</pre> <h2 id="规范">规范</h2> @@ -1101,8 +860,6 @@ table.standard-table td { </tbody> </table> -<p>{{cssinfo}}</p> - <h2 id="Browser_compatibility" name="Browser_compatibility">浏览器兼容性</h2> <p>{{Compat("css.properties.filter")}}</p> |