css filter 滤镜

filter

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

 

1、滤镜模糊  blur(10px)

范围： 0px ~ 

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

值越大，模糊半径越大

<style>
.box{
    width: 100px;height: 100px;background: #1a202e;padding: 50px;
    filter: blur(5px);
}
</style>
<div class="box"></div>

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

 

2、滤镜亮度  brightness（）

范围： 0 ~ 

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

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

<style>
img{
    filter: brightness(1.5);
}
</style>
<img src="./img" alt="风景">

 

3、滤镜对比度 contrast()

返回： 1 ~ 

<style>
img{
    filter: brightness(2);
}
</style>
<img src="./img" alt="风景">

 

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

参数说明：

· x轴模糊大小

· y轴模糊大小

· 模糊半径

· 模糊颜色

<style>
img{
    filter: drop-shadow(5px 5px 3px #666);
}
</style>
<img src="./img" alt="风景">

 

5、滤镜灰度 grayscale（）

范围：1% ~ 100%

<style>
img{
    filter: grayscale(10%);
}
</style>
<img src="./img" alt="风景">

实际应用:

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

 

 

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

范围：1deg ~ 365deg 

<style>
img{
    filter: hue-rotate(100deg);
}
</style>
<img src="./img" alt="风景">

 

7、滤镜反相  invert(10%)

范围：1% ~ 100%

类似照片底照

<style>
img{
    filter: invert(100%);
}
</style>
<img src="./img" alt="风景">

 

8、滤镜透明度  opacity（）

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

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

<style>
img{
    filter: opacity(50%);
}
</style>
<img src="./img" alt="风景">

 

9、滤镜饱和度  saturate()

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

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

<style>
img{
    filter: saturate(200%);
}
</style>
<img src="./img" alt="风景">

 

10、滤镜褐色  sepia（）

范围：1% ~ 100%

百分比越高，褐色越强

<style>
img{
    filter: sepia(60%);
}
</style>
<img src="./img" alt="风景">