前端 -- 页面滤镜效果及高斯模糊效果

原文链接：

https://blog.csdn.net/MR_LP/article/details/65443047

0.前言

注意：
若文章中发现图片无法加载，请移步作者其他博客。
* 简书
* 掘金

最近在用手机的过程中，发现苹果在非常多的地方都使用了模糊的效果。

高斯效果虽然炫酷，可是咱们身为前端人员，又该如何去模仿这个效果呢？

这时候我们就要说到 CSS 3 中的一个属性，Filter 了。

1.Filter

CSS滤镜（filter）：
提供的图形特效，像模糊，锐化或元素变色。
过滤器通常被用于调整图片，背景和边界的渲染。

Filter 的一些基础内容：

名称说明

初始值	none
适用元素	所有元素;在SVG,它适用于容器元素不包括def元素和所有图形元素
继承性	不继承
适用效果	视觉处理
增添版本	CSS3
JS 语法	`object.style.WebkitFilter="grayscale(100%)"`

关于适用浏览器版本：

平时推荐大家还是用 Chrome 浏览器来查看效果吧。

除此之外，再补充一下在 MDN 上给出的兼容性说明。

出自之外，Filter 虽然在属性介绍中说明是不继承的，但是它其实和 Opacity 非常类似，都会导致子级发生问题。

这时候我们就要用到另外一个内容，Filter（） 函数了。

但是，咱们还是循序渐进，先继续来看 Filter 吧。

在介绍了 Filter 的基础使用之后，我们接下来介绍一下它的属性。

属性名属性介绍填写方式

none	无效果	默认值
grayscale	灰度	百分比
sepia	褐色	百分比
saturate	饱和度	百分比
hue-rotate	色相旋转	deg
invert	反色	百分比
opacity	透明度	百分比
brightness	亮度	百分比
contrast	对比度	百分比
blur	模糊	px
drop-shadow	阴影	h-shadow v-shadow blur spread color

既然知道了都有哪些属性，那么我们接下来就来一起看看。

这些属性都是如何去使用的吧。

2.属性的书写

2.1 grayscale ：灰度

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:grayscale(1);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        grayscale ：灰度
    </h3>
</body>
</html>

实现效果：

解释说明：

灰度会将我们的照片进行灰白处理，其实说白了就是由原本的彩色照片变成黑白照片而已。

需要注意：

值为100%则完全转为灰度图像，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。
若未设置，W3C说值默认是0，但是实际测试应为 100%。

2.2 sepia ：褐色

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:sepia(1);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        sepia ： 褐色
    </h3>
</body>
</html>

实现效果：

解释说明：

sepia 是将图像转换为深褐色。

处理过后能实现一种类似于“老照片”的泛黄感觉。

除此之外，需要注意：

值为100%则完全是深褐色的，值为0%图像无变化。
值在0%到100%之间，则是效果的线性乘子。
若未设置，W3C说值默认是0，但是实际测试应为 100%。

2.3 saturate ：饱和度

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:saturate(4);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        saturate ：饱和度
    </h3>
</body>
</html>

实现效果：

解释说明：

saturate 是用于转换图像饱和度。

虽然转换成 0 的话，看上去实现效果和“灰度”差不多。

但是饱和度是可以设置超过原本图片色彩的。

除此之外，需要注意：

值为0%则是完全不饱和，值为100%则图像无变化。
其他值，则是效果的线性乘子。
超过100%的值是允许的，则有更高的饱和度。
若值未设置，值默认是1。

2.4 hue-rotate ：色相旋转

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:hue-rotate(90deg);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        hue-rotate ：色相旋转
    </h3>
</body>
</html>

实现效果：

解释说明：

hue-rotate 是给图像应用色相旋转。

数值设定图像会被调整的色环角度值。

注意：

值为0deg，则图像无变化。
若值未设置，默认值是0deg。
该值虽然没有最大值，超过360deg的值相当于又绕一圈。

2.5 invert ：反色

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:invert(1);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        invert ：反色
    </h3>
</body>
</html>

实现效果：

解释说明：

invert 是反转输入图像。

就像我们照相机的底片一样。

注意：

100%的价值是完全反转。
值为0%则图像无变化。
值在0%和100%之间，则是效果的线性乘子。
若值未设置，值默认是0。

2.6 透明度

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:opacity(.2);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        opacity ：透明度
    </h3>
</body>
</html>

实现效果：

解释说明：

opacity 是转化图像的透明程度。

注意：

值为0%则是完全透明，值为100%则图像无变化。
值在0%和100%之间，则是效果的线性乘子，也相当于图像样本乘以数量。
若值未设置，值默认是1。
该函数与已有的opacity属性很相似，不同之处在于通过filter，一些浏览器为了提升性能会提供硬件加速。

2.7 亮度

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:brightness(2);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        brightness ：亮度
    </h3>
</body>
</html>

实现效果：

解释说明：

brightness 是给图片应用一种线性乘法，使其看起来更亮或更暗。

注意：

如果值是0%，图像会全黑。值是100%，则图像无变化。
其他的值对应线性乘数效果。
值超过100%也是可以的，图像会比原来更亮。
如果没有设定值，默认是1。

2.8 contrast ：对比度

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:contrast(2);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        contrast ：对比度
    </h3>
</body>
</html>

实现效果：

解释说明：

contrast 是调整图像的对比度。

注意：

值是0%的话，图像会全黑。
值是100%，图像不变。
值可以超过100%，意味着会运用更低的对比。
若没有设置值，默认是1。

2.9 blur ：模糊

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:blur(2px);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        blur ：模糊
    </h3>
</body>
</html>

实现效果：

解释说明：

终于到重头戏了，模糊。

blur 是给图像设置高斯模糊。

“radius”一值设定高斯函数的标准差，或者是屏幕上以多少像素融在一起，所以值越大越模糊；

注意：

如果没有设定值，则默认是0；
这个参数可设置css长度值，但不接受百分比值。

2.10 drop-shadow ：阴影

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:drop-shadow(5px 5px 5px #ccc);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 40px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        drop-shadow ：阴影
    </h3>
</body>
</html>

实现效果：

解释说明：

drop-shadow 是给图像设置一个阴影效果。

阴影是合成在图像下面，可以有模糊度的，可以以特定颜色画出的遮罩图的偏移版本。

函数接受(在CSS3背景中定义)类型的值，

除了”inset”关键字是不允许的。

该函数与已有的box-shadow box-shadow属性很相似；

不同之处在于，通过滤镜，一些浏览器为了更好的性能会提供硬件加速。

在这里带着大家回顾一下之前 box-shadow 的属性说明：

(必须)
- 这是设置阴影偏移量的两个值. 设定水平方向距离. 负值会使阴影出现在元素左边. 设定垂直距离.负值会使阴影出现在元素上方。查看可能的单位.
  如果两个值都是0, 则阴影出现在元素正后面 (如果设置了 and/or ，会有模糊效果).
(可选)
- 这是第三个code>值. 值越大，越模糊，则阴影会变得更大更淡.不允许负值若未设定，默认是0 (则阴影的边界很锐利).
(可选)
- 这是第四个值. 正值会使阴影扩张和变大，负值会是阴影缩小.若未设定，默认是0 (阴影会与元素一样大小).
  注意: Webkit, 以及一些其他浏览器不支持第四个长度，如果加了也不会渲染。
(可选)
- 查看该值可能的关键字和标记。若未设定，颜色值基于浏览器。在Gecko (Firefox), Presto (Opera)和Trident (Internet Explorer)中，会应用colorcolor属性的值。另外, 如果颜色值省略，WebKit中阴影是透明的。

2.11 URL ：自定义 XML 文件

解释说明：

URL函数接受一个XML文件，该文件设置了一个SVG滤镜，且可以包含一个锚点来指定一个具体的滤镜元素.

引入方法：

.target { filter: url(#c1); }

.mydiv { filter: url(commonfilters.xml#large-blur) }

2.12 复合写法

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div{
            width: 467px;
            height: 700px;
            border: 1px solid #000;
            margin: 0px auto;

            -webkit-transition: all .5s;
            -moz-transition: all .5s;
            -ms-transition: all .5s;
            -o-transition: all .5s;
            transition: all .5s;

        }
        img{
            width: 100%;
            height: 100%;
        }
        div:hover{
            -webkit-filter:contrast(175%) brightness(70%);
        }
        h3{
            margin: 0;
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div>
        <img src="IMG_3479.JPG">
    </div>
    <h3>
        你可以组合任意数量的函数来控制渲染。下面的例子可以增强图像的对比度和亮度。
    </h3>
</body>
</html>

实现效果：

解释说明：

你可以组合任意数量的函数来控制渲染。

例如同时去增强图像的对比度和亮度等等。

3. Filter （）函数

以下部分内容出自 W3Plus。

很多时候，只是希望元素的背景做效果调整，又不希望他会影响其他元素。
而且又没有backdrop-filter属性的情形之下，filter()就显得格外的重要。
在继续往下阅读之前，你要注意一点，filter()并不等于以前介绍过的filter属性。
简单的理解，一个是函数，一个是属性。那么我们今天要说的是filter()函数。

为了能更好的与filter属性区分，filter()函数接受两个参数：

filter(<url>, <filter-function-list>)

其中是指一个图像，是一个过滤器。

这两者结合在一起将会返回一个处理过的新图像。

例如：

.element {
    background: filter(url(path/to/img.jpg), blur(5px)); 
}

因此，你可以给图片使用过滤效果，然后填充到元素中，比如background-filter、background-opacity、background-blur等等。

注意：

规范中定义的过滤函数
和background-size属性一起使用会有Bug
支持动画
需要添加前缀：-webkit-filter()

值得一提的是，backdrop-filter和filter()可以使用CSS3 transition和animation实现一些圆滑的过度效果或动画，甚至还可以使用JavaScript。