↩ zhcn 编程语言 Web相关 JSON 非公開: 高级 CSS 过滤器（过滤器）

高级 CSS 过滤器（过滤器）

说到滤镜，大家首先想到的就是PhotoShop这样的绘图软件，它可以美化你的照片。 CSS 允许您无需软件即可实现多种类型的滤镜效果，例如模糊效果、透明效果、颜色对比度调整和颜色反转。此外，网页元素或视频可以通过 CSS 过滤器进行处理。在本节中，您将了解如何在 CSS 中使用过滤器。

CSS滤镜效果必须通过filter属性和一些函数来实现，如下所示。

筛选	解释
none	默认值表示没有效果
blur(px)	在图像上设置高斯模糊。默认值为0，单位为像素，值越高越模糊
brightness(%)	调整图像的亮度。默认值为100%，代表原始图像。 0% 表示没有亮度，图像将是全黑的。高于 100% 的值会使图像变亮。
contrast(%)	调整图像的对比度。默认值为100%，代表原始图像。 0% 使图像全黑。高于 100% 的值会增加图像的对比度。
drop-shadow(h-shadow v-shadow blur spread color)	为图像添加阴影效果。参数为： h-shadow：必需的值，指定水平阴影像素值。如果值为负，阴影将出现在图像的左侧。 v-shadow：必填值，指定垂直阴影的像素值。如果该值为负数，阴影将出现在图像顶部。模糊：可选值，为阴影添加模糊效果。默认值为0，单位为像素，较高的值会产生更多的模糊（更大更亮的阴影），禁止使用负值；点差：期权价值。默认值为 0，单位为像素。正值会导致阴影扩大和增大；负值会导致阴影缩小。颜色：可选值。为阴影添加颜色。如果没有指定，浏览器将使用绝对颜色。通常为黑色。注意：Chrome、Safari、Opera等浏览器不支持第四个参数，所以添加没有效果。
grayscale(%)	将图像转换为灰度图像。默认值为0%，即原始图像。 100%表示图像完全转换为灰度图像（即黑白图像）。禁止使用负值
hue-rotate(deg)	对图像应用色调旋转。该值用于定义着色顺序。默认值为0deg，代表原始图像，最大值为360deg。
invert(%)	翻转图像。默认值为0%，表示原图；100%表示完全反转，不允许负值
opacity(%)	设置图像的不透明度。默认值为 100%，即原始图像。 0%表示完全透明，不允许负值
saturate(%)	设置图像的饱和度。默认值为 100%，即原始图像。 0%表示图像完全去饱和，不允许负值
sepia(%)	将图像转换为棕褐色。默认值为0%，即原始图像。 100%表示图像完全转换为棕褐色，不允许负值
url()	url()函数用于指定设置SVG过滤器的XML文件，可以包含锚点来指定特定的过滤器元素
initial	将属性设置为默认值
inherit	从父元素继承该属性的值

提示：这些CSS函数的参数值一般在0和1之间（0%和100%），但也有一些例外，比如blur()函数的参数值，以像素为单位。 -rotate()函数的参数值的单位是“deg”。

[示例] 下面是在 CSS 中使用过滤器的示例。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            position: relative;
        }
        div span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-shadow: 1px 1px 2px black;
        }
        img {
            width: 100%;
        }
        div img.ぼかし {
            filter: blur(4px);
        }
        div img.輝度 {
            filter: brightness(250%);
        }
        div img.コントラスト {
            filter: contrast(180%);
        }
        div img.グレースケール {
            filter: grayscale(100%);
        }
        div img.色相回転 {
            filter: hue-rotate(180deg);
        }
        div img.反転 {
            filter: invert(100%);
        }
        div img.透明度 {
            filter: opacity(50%);
        }
        div img.飽和度 {
            filter: saturate(7);
        }
        div img.セピア {
            filter: sepia(100%);
        }
        div img.ドロップシャドウ {
            filter: drop-shadow(8px 8px 10px green);
        }
    </style>
</head>
<body>
    <div><img src="./tulip.jpg" alt="チューリップ">                   <span>原始画像</span></div>
    <div><img class="ぼかし" src="./tulip.jpg" alt="チューリップ">      <span>blur(4px)</span></div>
    <div><img class="輝度" src="./tulip.jpg" alt="チューリップ"><span>brightness(250%)</span></div>
    <div><img class="コントラスト" src="./tulip.jpg" alt="チューリップ">  <span>contrast(180%)</span></div>
    <div><img class="グレースケール" src="./tulip.jpg" alt="チューリップ"> <span>grayscale(100%)</span></div>
    <div><img class="色相回転" src="./tulip.jpg" alt="チューリップ"> <span>hue-rotate(180deg)</span></div>
    <div><img class="反転" src="./tulip.jpg" alt="チューリップ">    <span>invert(100%)</span></div>
    <div><img class="透明度" src="./tulip.jpg" alt="チューリップ">   <span>opacity(50%)</span></div>
    <div><img class="飽和度" src="./tulip.jpg" alt="チューリップ">  <span>saturate(7)</span></div>
    <div><img class="セピア" src="./tulip.jpg" alt="チューリップ">     <span>sepia(100%)</span></div>
    <div><img class="ドロップシャドウ" src="./tulip.jpg" alt="チューリップ">    <span>drop-shadow(8px 8px 10px green)</span></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_811”对齐=“aligncenter”宽度=“1024”]

图：过滤器属性演示[/caption]

此外，您还可以在同一元素上使用多个滤镜效果。只需用空格分隔每个过滤器功能即可。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            position: relative;
        }
        div span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-shadow: 1px 1px 2px black;
        }
        img {
            width: 100%;
            filter: sepia(90%) saturate(400%) brightness(150%);
        }
    </style>
</head>
<body>
    <div><img src="./tulip.jpg" alt="チューリップ"><span>セピア（90％）色鮮やかさ（400％）明るさ（150％）</span></div>
</body>
</html>

执行结果如下图所示。

注意：组合使用多种滤镜效果时，要特别注意它们的使用顺序。否则会出现意想不到的效果，例如在使用grayscale()之后再使用sepia()会产生完全灰度的图像。

您可以对任何 HTML 元素使用滤镜效果，包括图像、文本和视频。你可以用滤镜来美化它。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            filter: blur(2px) contrast(50%) brightness(80%);
        }
    </style>
</head>
<body>
    <div>フィルターに関して話すと、多くの人々は最初に PhotoShop のようなグラフィックデザインソフトウェアを思い浮かべるかもしれません。このようなソフトウェアのフィルターを使って、画像を美化することができます。しかし、CSS では、ソフトウェアなしでもさまざまなフィルター効果を実現することができます。例えば、ぼかし効果、透明効果、色の対比の調整、色の反転などです。また、CSS のフィルター機能を使うことで、Web ページ上の要素やビデオを処理することができます。</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_814”对齐=“aligncenter”宽度=“1024”]

图：为页面其他元素设置滤镜效果[/caption]

提示：IE浏览器不支持过滤属性

《高级CSS过滤器（filter）》浅显易懂的讲解！您必须观看的 2 个最佳视频

My filter() method

https://www.youtube.com/watch?v=eRM7ekb1iQU&pp=ygUz6Kmz57SwQ1NT44OV44Kj44Or44K_44O877yI44OV44Kj44Or44K_44O877yJJmhsPUpB

JSON

说到滤镜，大家首先想到的就是PhotoShop这样的绘图软件，它可以美化你的照片。 CSS 允许您无需软件即可实现多种类型的滤镜效果，例如模糊效果、透明效果、颜色对比度调整和颜色反转。此外，网页元素或视频可以通过 CSS 过滤器进行处理。在本节中，您将了解如何在 CSS 中使用过滤器。

CSS滤镜效果必须通过filter属性和一些函数来实现，如下所示。

筛选	解释
none	默认值表示没有效果
blur(px)	在图像上设置高斯模糊。默认值为0，单位为像素，值越高越模糊
brightness(%)	调整图像的亮度。默认值为100%，代表原始图像。 0% 表示没有亮度，图像将是全黑的。高于 100% 的值会使图像变亮。
contrast(%)	调整图像的对比度。默认值为100%，代表原始图像。 0% 使图像全黑。高于 100% 的值会增加图像的对比度。
drop-shadow(h-shadow v-shadow blur spread color)	为图像添加阴影效果。参数为： h-shadow：必需的值，指定水平阴影像素值。如果值为负，阴影将出现在图像的左侧。 v-shadow：必填值，指定垂直阴影的像素值。如果该值为负数，阴影将出现在图像顶部。模糊：可选值，为阴影添加模糊效果。默认值为0，单位为像素，较高的值会产生更多的模糊（更大更亮的阴影），禁止使用负值；点差：期权价值。默认值为 0，单位为像素。正值会导致阴影扩大和增大；负值会导致阴影缩小。颜色：可选值。为阴影添加颜色。如果没有指定，浏览器将使用绝对颜色。通常为黑色。注意：Chrome、Safari、Opera等浏览器不支持第四个参数，所以添加没有效果。
grayscale(%)	将图像转换为灰度图像。默认值为0%，即原始图像。 100%表示图像完全转换为灰度图像（即黑白图像）。禁止使用负值
hue-rotate(deg)	对图像应用色调旋转。该值用于定义着色顺序。默认值为0deg，代表原始图像，最大值为360deg。
invert(%)	翻转图像。默认值为0%，表示原图；100%表示完全反转，不允许负值
opacity(%)	设置图像的不透明度。默认值为 100%，即原始图像。 0%表示完全透明，不允许负值
saturate(%)	设置图像的饱和度。默认值为 100%，即原始图像。 0%表示图像完全去饱和，不允许负值
sepia(%)	将图像转换为棕褐色。默认值为0%，即原始图像。 100%表示图像完全转换为棕褐色，不允许负值
url()	url()函数用于指定设置SVG过滤器的XML文件，可以包含锚点来指定特定的过滤器元素
initial	将属性设置为默认值
inherit	从父元素继承该属性的值

提示：这些CSS函数的参数值一般在0和1之间（0%和100%），但也有一些例外，比如blur()函数的参数值，以像素为单位。 -rotate()函数的参数值的单位是“deg”。

[示例] 下面是在 CSS 中使用过滤器的示例。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            float: left;
            position: relative;
        }
        div span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-shadow: 1px 1px 2px black;
        }
        img {
            width: 100%;
        }
        div img.ぼかし {
            filter: blur(4px);
        }
        div img.輝度 {
            filter: brightness(250%);
        }
        div img.コントラスト {
            filter: contrast(180%);
        }
        div img.グレースケール {
            filter: grayscale(100%);
        }
        div img.色相回転 {
            filter: hue-rotate(180deg);
        }
        div img.反転 {
            filter: invert(100%);
        }
        div img.透明度 {
            filter: opacity(50%);
        }
        div img.飽和度 {
            filter: saturate(7);
        }
        div img.セピア {
            filter: sepia(100%);
        }
        div img.ドロップシャドウ {
            filter: drop-shadow(8px 8px 10px green);
        }
    </style>
</head>
<body>
    <div><img src="./tulip.jpg" alt="チューリップ">                   <span>原始画像</span></div>
    <div><img class="ぼかし" src="./tulip.jpg" alt="チューリップ">      <span>blur(4px)</span></div>
    <div><img class="輝度" src="./tulip.jpg" alt="チューリップ"><span>brightness(250%)</span></div>
    <div><img class="コントラスト" src="./tulip.jpg" alt="チューリップ">  <span>contrast(180%)</span></div>
    <div><img class="グレースケール" src="./tulip.jpg" alt="チューリップ"> <span>grayscale(100%)</span></div>
    <div><img class="色相回転" src="./tulip.jpg" alt="チューリップ"> <span>hue-rotate(180deg)</span></div>
    <div><img class="反転" src="./tulip.jpg" alt="チューリップ">    <span>invert(100%)</span></div>
    <div><img class="透明度" src="./tulip.jpg" alt="チューリップ">   <span>opacity(50%)</span></div>
    <div><img class="飽和度" src="./tulip.jpg" alt="チューリップ">  <span>saturate(7)</span></div>
    <div><img class="セピア" src="./tulip.jpg" alt="チューリップ">     <span>sepia(100%)</span></div>
    <div><img class="ドロップシャドウ" src="./tulip.jpg" alt="チューリップ">    <span>drop-shadow(8px 8px 10px green)</span></div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_811”对齐=“aligncenter”宽度=“1024”]

图：过滤器属性演示[/caption]

此外，您还可以在同一元素上使用多个滤镜效果。只需用空格分隔每个过滤器功能即可。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            width: 300px;
            height: 300px;
            position: relative;
        }
        div span {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            text-shadow: 1px 1px 2px black;
        }
        img {
            width: 100%;
            filter: sepia(90%) saturate(400%) brightness(150%);
        }
    </style>
</head>
<body>
    <div><img src="./tulip.jpg" alt="チューリップ"><span>セピア（90％）色鮮やかさ（400％）明るさ（150％）</span></div>
</body>
</html>

执行结果如下图所示。

注意：组合使用多种滤镜效果时，要特别注意它们的使用顺序。否则会出现意想不到的效果，例如在使用grayscale()之后再使用sepia()会产生完全灰度的图像。

您可以对任何 HTML 元素使用滤镜效果，包括图像、文本和视频。你可以用滤镜来美化它。示例代码如下。

 <!DOCTYPE html>
<html>
<head>
    <style>
        div {
            filter: blur(2px) contrast(50%) brightness(80%);
        }
    </style>
</head>
<body>
    <div>フィルターに関して話すと、多くの人々は最初に PhotoShop のようなグラフィックデザインソフトウェアを思い浮かべるかもしれません。このようなソフトウェアのフィルターを使って、画像を美化することができます。しかし、CSS では、ソフトウェアなしでもさまざまなフィルター効果を実現することができます。例えば、ぼかし効果、透明効果、色の対比の調整、色の反転などです。また、CSS のフィルター機能を使うことで、Web ページ上の要素やビデオを処理することができます。</div>
</body>
</html>

执行结果如下图所示。

[标题id =“attachment_814”对齐=“aligncenter”宽度=“1024”]

图：为页面其他元素设置滤镜效果[/caption]

提示：IE浏览器不支持过滤属性