CSS3中强大的filter(滤镜)属性

Dear 丶 2021-11-13 22:36 461阅读 0赞

1**定义**

filter，从字面意思来看就是滤镜，官方定义filter属性定义了元素(通常是<img>)的可视效果(例如：模糊与饱和度)；举个栗子：

![复制代码][Image 1]

![复制代码][Image 1]

![Image 1][] ![1120330-20170605072332325-591752955.png][] ![1120330-20170605072626856-327472267.png][]

看到这个效果，博友们是不是都开始对filter开始感兴趣了呢 ？

2**语法**

*  1　　grayscale灰度
    
    2　　sepia褐色（有种复古的旧照片感觉）
    
    3　　saturate饱和度
    
    4　　hue-rotate色相旋转
    
    5　　invert反色
    
    6　　opacity透明度
    
    7　　brightness亮度
    
    8　　contrast对比度
    
    9　　blur模糊

0　　drop-shadow阴影

举个栗子:

这里用sepia调整

![复制代码][Image 1]

1 <head>
     2     <meta charset="UTF-8">
     3     <title>Title</title>
     4     <style>
     5         .img{
       
    
     6             -webkit-filter:sepia(70%);
     7         } 
     8     </style>
     9 </head>
    10 <body>
    11 <img src="img/boke.png" alt="">
    12 <img class="img" src="img/boke.png" alt="">
    13 </body>

![复制代码][Image 1]

示例图片：

![1120330-20170605073914403-1318370889.png][]

3**示例**

下面，对filter属性的其中几个值做一个示例，其他好玩的东西需要博友们一起发掘，有啥好玩的可以跟我一起分享哟

(1) **hue-rotate(色彩旋转)**

效果看图吧，具体使用效果要靠大家发掘：

![复制代码][Image 1]

1    <style>
     2         .img{
        
     3             -webkit-filter:hue-rotate(330deg);
     4         }
     5     </style>
     6 </head>
     7 <body>
     8 <img src="img/boke.png" alt="">
     9 <img class="img" src="img/boke.png" alt="">
    10 </body>

![复制代码][Image 1]

效果图：

![1120330-20170605074728168-1472654795.png][]

(2) **blur(模糊)**

blur（模糊效果，单位px）

![复制代码][Image 1]

1    <style>
     2         .img{
       
     3             -webkit-filter:blur(1px);
     4         }
     5     </style>
     7 <body>
     8 <img src="img/boke.png" alt="">
     9 <img class="img" src="img/boke.png" alt="">
    10 </body>

![复制代码][Image 1]

示例图片：

![1120330-20170605075605043-1429319936.png][]

(3) **invert反色**

invert反色会吧图片变成底片的感觉，多说无益，看代码：

![复制代码][Image 1]

![复制代码][Image 1]

示例图片：

![1120330-20170605080015059-121117072.png][]

好了，今天的分享就到这里了，谢谢大家的观看，其它的效果博主就不一一举例了，如果感兴趣请大家一一探索，也可以跟博主来交流，有什么好的意见建议请给博主留言，谢谢。

[Image 1]: 
[1120330-20170605072332325-591752955.png]: https://images2015.cnblogs.com/blog/1120330/201706/1120330-20170605072332325-591752955.png
[1120330-20170605072626856-327472267.png]: /images/20211113/4d8dd68dcd774e989f93a7f2137f1500.png
[1120330-20170605073914403-1318370889.png]: /images/20211113/41e69a58b3f644e6b2724860daa8cc1e.png
[1120330-20170605074728168-1472654795.png]: /images/20211113/3228b78bc333429f8b863d5145e1bbdc.png
[1120330-20170605075605043-1429319936.png]: /images/20211113/2896cc0eecff492ea03a7b8947f0e053.png
[1120330-20170605080015059-121117072.png]: /images/20211113/3eac0c81a17443d88ce2c91b9b63411a.png