<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
<meta content="webkit" name="renderer">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<title>css滤镜</title>
</head>
<body>
<div>
<h3>原图</h3>
<img src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
<h3>高斯模糊滤镜</h3>
<h5>为图像设置高斯模糊，值越大越模糊， 默认是0，既不模糊，值的单位是PX</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: blur(10px);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>亮度调整滤镜</h3>
<h5>通过设置brightness(%)来调整图片的亮度，如果值为 0% 图像会全黑，如果值为100%，图像无变化，如果值为100%之上，图像会变得更亮，默认值是1</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: brightness(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>对比度调整滤镜</h3>
<h5>通过设置contrast(%)来调整图片的亮度, 单位可以是百分比 和 小数 表示，如果值为 0% 图像会全黑，如果值为100%，图像无变化，如果值为100%之上,图像的对比度更加强,意味着图片的鲜艳度更强，图片更加鲜艳了 白的更白,黑的更黑，默认值是1 小于100%，可以看到图片颜色灰度增加了</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: contrast(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>灰度滤镜</h3>
<h5>通过设置grayscale(%)将图片转换成灰度图片,值可以是小数和百分数.默认 0，当值超过100%时完全转换成灰度图片,当值为0% 图像无变化，默认值是1</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: grayscale(40%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>图像反转滤镜</h3>
<h5>上了点年纪的人一般见过胶卷相机，照片的底片那种效果其实就是图片反转效果。比如将黑色反转成白色，其它颜色也反转成其相反的颜色。使用invert(%)可以对其进行控制，其值可以是0-1之间的小数或者百分比，默认值为0。值为100%的时候是完全反转，与0时图像无变化。为50%的时候，所有色彩都变成灰色。</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: invert(1);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>透明度调整滤镜</h3>
<h5>和css设置元素透明度效果一样,不过这个使用滤镜实现的</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: opacity(0.6);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>饱和度滤镜</h3>
<h5>通过设置saturate(%)调整图片的饱和度大小,
当值超过100%时图片饱和度增高,色彩就会变重.
当值为0% 图像完全不饱和
当值为100% 图像无变化</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: saturate(1.6);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>复古滤镜</h3>
<h5>将图片调成深褐色
通过sepia(%)可以将图像调整为深褐色，可以很容易的营造出发黄、复古的效果。该函数的值为0-1之间的数字或者百分比，默认值为0。当值为100%时，图像完全变成深褐色的，值为0%图像无变化。</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: sepia(100%);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
<h3>色相旋转滤镜</h3>
<h5>通过hue-rotate(deg)可以将图像进行色相旋转。所谓色相旋转，就是指将图像中的各种颜色按照给定的角度在色相环中旋转成新的对应颜色。该函数默认值是Odeg，其值可以上不过超过360deg相当于又转了一圈。</h5>
<div style="overflow:hidden;width: 700px;">
<img style="filter: hue-rotate(180deg);" src="https://pic2.zhimg.com/80/v2-267217db1a16cf81a50184ea7d520289_720w.webp" />
</div>
</div>
</body>
</html>
