css filter 滤镜

川长思鸟来 2023-02-14 05:59 272阅读 0赞

### filter ###

***注：**filter 属性 目前已经完全可以在实际项目中应用，只要你的项目不需要兼容IE和Edge，例如中后台和内部系统，移动端项目等，可以放心使用。*

![CSS滤镜兼容性][CSS]

## ##

### **1、滤镜模糊  blur(10px)**  ###

**范围： 0px ~ **

**通常用在背景图片模糊上。**

值越大，模糊半径越大

![20200601134429496.png][]

**实际案例 - 网易云音乐歌曲详情背景图：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

### **2、滤镜亮度  brightness（）** ###

**范围： 0 ~ **

**用途：**常用在svg图标颜色切换、图片亮度调整

**注意：** brightness（0） 时，颜色为黑色；brightness（1）元素或图片原本的颜色

![20200601135808648.png][]![20200601135821678.png][]

### **3、滤镜对比度 contrast()** ###

**返回： 1 ~ **

![20200601135808648.png][]![20200601140516382.png][]

### **4、滤镜 投影 drop-shadow(5px 5px 3px \#666)** ###

**参数说明：**

· x轴模糊大小

· y轴模糊大小

· 模糊半径

· 模糊颜色

![2020060114140563.png][]

### **5、滤镜灰度 grayscale（）** ###

**范围：**1% ~ 100%

![20200601135808648.png][]![20200601141836103.png][]

**实际应用:**

这个属性配合hover 或者 js 可以做

### **6、滤镜的色调变化  hue-rotate( 90deg )** ###

**范围：1**deg ~ 365deg

![20200601135808648.png][]![20200601142207288.png][]

### **7、滤镜反相  invert(10%)** ###

**范围：**1% ~ 100%

类似照片底照

![20200601135808648.png][]![20200601142530612.png][]

### **8、滤镜透明度  opacity（）** ###

**范围：**1% ~ 100%。  1%：白色； 100%：原色

**与opacity的区别：**部分浏览器，滤镜opacity可以开启硬件加速，性能更好。

![20200601135808648.png][]![20200601142825350.png][]

### **9、滤镜饱和度  saturate()** ###

**范围：**1% ~ 360% ；100%是原色，小于100%，饱和度月底，颜色越灰；大于100%，饱和度越高，颜色越鲜艳。

滤镜饱和度越大，饱和度越高，颜色越鲜艳。

![20200601135808648.png][]![20200601143345106.png][]

### **10、滤镜褐色  sepia（）** ###

**范围：**1% ~ 100%

百分比越高，褐色越强

![20200601135808648.png][]![20200601143730805.png][]

[CSS]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZS56aGFuZ3hpbnh1LmNvbS9pbWFnZS9ibG9nLzIwMTkwNi8yMDE5LTA2LTA5XzIxMzYxNC5wbmc?x-oss-process=image/format,png
[20200601134429496.png]: https://img-blog.csdnimg.cn/20200601134429496.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200601144209971.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx,size_16,color_FFFFFF,t_70
[20200601135808648.png]: https://img-blog.csdnimg.cn/20200601135808648.png
[20200601135821678.png]: https://img-blog.csdnimg.cn/20200601135821678.png
[20200601140516382.png]: https://img-blog.csdnimg.cn/20200601140516382.png
[2020060114140563.png]: https://img-blog.csdnimg.cn/2020060114140563.png
[20200601141836103.png]: https://img-blog.csdnimg.cn/20200601141836103.png
[20200601142207288.png]: https://img-blog.csdnimg.cn/20200601142207288.png
[20200601142530612.png]: https://img-blog.csdnimg.cn/20200601142530612.png
[20200601142825350.png]: https://img-blog.csdnimg.cn/20200601142825350.png
[20200601143345106.png]: https://img-blog.csdnimg.cn/20200601143345106.png
[20200601143730805.png]: https://img-blog.csdnimg.cn/20200601143730805.png