filter - 常用滤镜效果（毛玻璃、图片阴影、图片褪色）

文章目录

- filter 属性
- 滤镜算法函数
- - blur：高斯模糊
  - hue-rotate：色相环
  - contrast：对比度
  - grayscale：灰度
  - drop-shadow：图片阴影
- 常见的滤镜效果
- - 图片内容轮廓阴影
  - 毛玻璃
  - 图片黑白
  - 调整图片色相和对比度
  - 使元素或文字变圆润

filter 属性

filter 属性为滤镜属性。
格式：filter: <filter-function>;

什么是滤镜？
滤镜：将元素中的像素点通过一些算法计算后，转换成新的像素点。

它还有一个兄弟属性：drop-filter
区别在于，filter 表示让本元素像素点参与计算，drop-filter 表示将本元素下面盖着的元素参与计算。

滤镜算法函数

有什么样的算法函数，就有什么样的滤镜效果。而且滤镜函数不仅可以单独使用，还是组合使用。
像素点a -> 算法1 -> 算法2 -> 像素点b

blur：高斯模糊

blur(10px)

blur 为高斯模糊函数，算法为参考周围像素点颜色来计算当前像素点的颜色。10px 表示参考的范围半径。参考范围越大，自然也越模糊，所以 blur() 里面这个值越大，画面就越模糊。

hue-rotate：色相环

hue-rotate(45deg)

它可以调整像素点的色相，函数里面的角度，就是色相环上对应的颜色。

contrast：对比度

contrast(1.5)

默认值为 1，值越小表示颜色对比度越小。

grayscale：灰度

grayscale(1)

默认值为 0，当值为 1 的时候，网页就变黑白了。纪念日很常用。

drop-shadow：图片阴影

drop-shadow(10px, 10px, 10px, ragb(0,0,0,0.5);

这个函数有点类似于 box-shadow 属性。box-shadow 属性在元素的整个框后面创建一个矩形阴影，而 drop-shadow() 过滤器则是创建一个符合图像本身形状 (alpha 通道) 的阴影。

常见的滤镜效果

图片内容轮廓阴影

注意：这种效果一般使用的图片都是背景透明的 png 图片。
因为这样才能体现出阴影沿着图片内容的轮廓。如果不透明，图片内容就是一个矩形，那效果和 box-shadow 看起来一样了，都是生成一个矩形的阴影。

.img-drop-shadow {
  filter: drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}
.img-box-shadow {
  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5);
}

原图内容阴影盒子阴影

毛玻璃

.ground-glass {
  height: 260px;
  width: 400px;
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  border-bottom: 1px solid hsla(0, 0%, 100%, 0.4);
  border-left: 1px solid hsla(0, 0%, 100%, 0.4);
  border-radius: 20px;
  box-shadow: 10px -10px 20px rgba(0, 0, 0, 0.2), -10px 10px 20px hsla(0, 0%, 100%, 0.1);
  background-image: linear-gradient(to top right, rgba(90, 149, 207, 0.5), rgba(58, 76, 99, 0.8));
  color: hsla(0, 0%, 100%, 0.8);
  backdrop-filter: blur(6px);
  z-index: 10;
}

图片黑白

.img-gray {
    filter: grayscale(1) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

调整图片色相和对比度

.img-color--change {
  filter: contrast(1.2) hue-rotate(274deg) drop-shadow(10px 10px 10px rgba(0, 0, 0, 0.5));
}

使元素或文字变圆润

以文字为例。

做法：

先将文字 blur 模糊。
在父元素中设置背景色和 filter 滤镜，并增大对比度 contrast。
1. filter: contrast(); 和 background-color 一定要一起显示出现在父元素中，父元素层级不限。

原理：
文字模糊后，父元素又加强对比度，加大对比度的作用是会让文字更清晰。但本身文字已经是模糊的了。因此对于文字的边缘地带，浏览器会自动融合文字颜色和背景色。整体效果就是文字变圆润了。

.text-card {
    display: flex;
    justify-content: space-evenly;
    font-size: 60px;
    font-weight: 700;
}
.text-card--soft {
    background-color: #ffffff;
    filter: contrast(15);
}
.text--soft {
    color: red;
    filter: blur(5px);
}

<div class="text-card">
    <h1 class="text">ikun</h1>
    <div class="text-card--soft">
        <h1 class="text--soft">ikun</h1>
    </div>
</div>