CSS3 filter的使用（改变模糊度亮度透明等）

待我称王封你为后i 2023-07-01 08:50 3阅读 0赞

讲到对图片的处理，我们经常想到的就是Photoshop等类的图像处理工具，其实css也可以很强大，作为一个前端开发我们也常常要做一些特效，比如根据不同的状态显示不同状态的颜色，或者hover的时候等等。

![format_png][]

上面这些效果css一样能做到

## **  CSS :filter** ##

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

CSS标准里包含了一些已实现预定义效果的函数。

filter:blur(px)   给图像设置高斯模糊

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>img{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-filter: blur(2px);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filter: blur(2px);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 1][]

filter:brightness(*%*)  给图片应用一种线性乘法，使其看起来更亮或更暗。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>img{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-filter: brightness(0.30);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filter: brightness(0.30);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 2][]

filter:contrast(*%*)  调整图像的对比度

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>img{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-filter: contrast(180%);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filter: contrast(180%);&nbsp;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 3][]

filter:grayscale(*%*)  将图像转换为灰度图像

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>img{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-filter: grayscale(100%);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filter: grayscale(100%);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 4][]

filter:hue-rotate(*%*)  给图像应用色相旋转。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>img{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-filter: hue-rotate(180deg);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filter: hue-rotate(180deg);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 5][]

filter:invert(*%*)  反转输入图像。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> </td> 
   <td> <p><code>img{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-filter: invert(100%);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filter: invert(100%);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 6][]

filter:opacity(*%*)  给图像应用色相旋转。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> </td> 
   <td> <p><code>img{ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>-webkit-filter: opacity(50%);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>filter: opacity(50%);&lt;br&gt;}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 7][]

filter:saturate(*%*)  转换图像饱和度。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>img{-webkit-filter:&nbsp;saturate(7);&nbsp;&nbsp;&nbsp;&nbsp;filter:&nbsp;saturate(7);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 8][]

filter:sepia(*%*)  将图像转换为深褐色。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>img{　　-webkit-filter:&nbsp;sepia(100%);&nbsp;&nbsp;&nbsp;filter:&nbsp;sepia(100%);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 9][]

filter:shadow(*%*)  给图像设置一个阴影效果。

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> </td> 
   <td> <p><code>img{　　 -webkit-filter:&nbsp;drop-shadow(8px 8px 10px green);&nbsp;&nbsp;&nbsp;&nbsp;filter:&nbsp;drop-shadow(8px 8px 10px green);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

![format_png 10][]

### 　结论：css3提供了filter这个属性，使得前端更容易实现酷炫的特效 ###

浏览器支持

紧跟在数字后面的 -webkit- 为指定浏览器的前缀

![format_png 11][]

**　注意:** 旧版 Internet Explorer 浏览器(4.0 to 8.0) 支持的非标准 "filter" 属性已被废弃。 IE8 及更低版本浏览器通常使用 opacity 属性。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE1NTA1NzM0Ni00MzI0NTQzNjkucG5n?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE2NDgxOTMwOC05OTEwNDE0NTMucG5n?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE2NTI0MDk1NS0xMDY5MTA1ODU3LnBuZw?x-oss-process=image/format,png
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE2NTgyNzg4MC0xMjE0NDgwNTIxLnBuZw?x-oss-process=image/format,png
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MDAyODI5OS0yNjkyODQ0MjcucG5n?x-oss-process=image/format,png
[format_png 5]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MDIxOTQyMS0yMDA2NTUzNzMzLnBuZw?x-oss-process=image/format,png
[format_png 6]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MDQyOTI5OS0xMDk2NjQ5MjY1LnBuZw?x-oss-process=image/format,png
[format_png 7]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MDkwODA2Ni0xNjQ3OTQ5NjUxLnBuZw?x-oss-process=image/format,png
[format_png 8]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MTUyOTQxNS01MTM2MzMwNTAucG5n?x-oss-process=image/format,png
[format_png 9]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MTU1OTEwNS04MTMwODI3MjcucG5n?x-oss-process=image/format,png
[format_png 10]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MTYzNDkwMS0yNDY4MTg0NDkucG5n?x-oss-process=image/format,png
[format_png 11]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWcyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvMTExMDgzNy8yMDE5MDQvMTExMDgzNy0yMDE5MDQwMzE3MjcxNjEyNS04Mzc3MzMyOTkucG5n?x-oss-process=image/format,png