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

时间  2019-11-24
标签 前端 页面 效果 高斯 模糊 繁體版
原文   原文链接

请各位读者添加一下做者的微信公众号，之后有新的文章，将在微信公众号直接推送给各位，很是感谢。
javascript

0.前言

注意：
若文章中发现图片没法加载，请移步做者其余博客。css

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

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

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

1.Filter

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

Filter 的一些基础内容：浏览器

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

关于适用浏览器版本：微信

平时推荐你们仍是用 Chrome 浏览器来查看效果吧。ide

除此以外，再补充一下在 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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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>李鹏 --> QQ:3206064928</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。

4. 后记

终于写完了，用时 5 个小时。

其中查找资料就花费了大量的事件。

可是最后仍是可以完成，发送给你们，同时也但愿你们可以在将来用到的时候可以记得看过这篇文章。

好啦，我也要去吃饭啦，拜拜了您嘞！

本文做者 ： 李鹏

QQ ：3206064928

微信：lipeng_0524

欢迎骚扰。

本文请勿随意转载，做者保留法律追究权利。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程