css的filter方法，给图片添加滤镜

<! DOCTYPE  html>

< html  lang= "en">

< head>

    < meta  charset= "UTF-8">

    < meta  http-equiv= "X-UA-Compatible"  content= "IE=edge">

    < meta  name= "viewport"  content= "width=device-width, initial-scale=1.0">

    < title>Document</ title>

</ head>

< style>

     img {

         /* blur() 函数将高斯模糊应用于输入图像。radius 定义了高斯函数的标准偏差值，或者屏幕上有多少像素相互融合，因此，较大的值将产生更多的模糊。若没有设置值，默认为0。该参数可以指定为 CSS 长度，但不接受百分比值。*/

         filter:  blur( 5 px);

         /* 将线性乘法器应用于输入图像，使其看起来或多或少地变得明亮。值为 0％ 将创建全黑图像值为 100％ 会使输入保持不变。其他值是效果的线性乘数。如果值大于 100% 提供更明亮的结果。若没有设置值，默认为 1。 */

         filter:  brightness( 0.4);

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

         filter:  contrast( 200 %);

         /* 对输入图像应用阴影效果。阴影可以设置模糊度的，以特定颜色画出的遮罩图的偏移版本，最终合成在图像下面。 函数接受<shadow>(在CSS3背景中定义)类型的值，除了 inset 和 spread 关键字 */

         filter:  drop-shadow( 16 px  16 px  20 px  blue);

         /* 将改变输入图像灰度。amount 的值定义了转换的比例。值为 100% 则完全转为灰度图像，值为 0% 图像无变化。值在 0% 到 100% 之间，则是效果的线性乘数。若未设置值，默认是 0。 */

         filter:  grayscale( 50 %);

         /* 函数在输入图像上应用色相旋转。angle 一值设定图像会被调整的色环角度值。值为 0deg，则图像无变化。若值未设置值，默认为 0deg。该值虽然没有最大值，超过 360deg 的值相当于又绕一圈。 */

         filter:  hue-rotate( 90 deg);

         /* 反转输入图像。amount 的值定义转换的比例。100% 的价值是完全反转。值为 0% 则图像无变化。值在 0% 和 100% 之间，则是效果的线性乘数。 若值未设置值，默认为 0。 */

         filter:  invert( 75 %);

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

         filter:  opacity( 25 %);

         /* 转换图像饱和度。amount 的值定义转换的比例。值为 0% 则是完全不饱和，值为 100% 则图像无变化。其他值是效果的线性乘数。超过 100% 则有更高的饱和度。 若未设置值，默认为 1。 */

         filter:  saturate( 30 %);

         /* 将图像转换为深褐色。amount 的值定义转换的比例。值为 100% 则完全是深褐色的，值为 0% 图像无变化。值在 0% 到 100% 之间，值是效果的线性乘数。若未设置，值默认是 0。 */

         filter:  sepia( 60 %);

         /* 复合函数。同事使用多个滤镜 */

         filter:  contrast( 175 %)  brightness( 3 %);

         /* 不使用滤镜 */

         filter:  none;

    }

     .container {

         margin:  50 px  auto;

         height:  140 px;

         width:  400 px;

         /* 给融合元素的父元素设置背景色 */

         background:  #fff;

         display:  flex;

         align-items:  center;

         justify-content:  center;

         /* 给融合元素的父元素设置contrast */

         filter:  contrast( 30);

    }

     .circle {

         border-radius:  50 %;

         position:  absolute;

         /* 给融合元素设置blur */

         filter:  blur( 15 px);

    }

     .circle-1 {

         height:  90 px;

         width:  90 px;

         background:  #03a9f4;

         transform:  translate( -50 px);

         animation:  2 s moving  linear  infinite  alternate-reverse;

    }

     .circle-2 {

         height:  60 px;

         width:  60 px;

         background:  #15ff00;

         transform:  translate( 50 px);

         animation:  2 s moving  linear  infinite  alternate;

    }

     @keyframes  moving {

         /* //两个元素的移动 */

        0% {

             transform:  translate( 50 px)

        }

        100% {

             transform:  translate( -50 px)

        }

    }

</ style>

< body>

    < div  class= "container">

        < div  class= "circle circle-1"></ div>

        < div  class= "circle circle-2"></ div>

    </ div>

     <!-- <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20190214%2Fed33981873a044638a8bd45ed24bfe32.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1634967244&t=eb2d4e2c09282313b334a7c68587afbb"

        alt=""> -->

</ body>

</ html>