资讯

历史

科技

环境与自然

成长

游戏

财经

文学与艺术

美食

健康

家居

文化

情感

汽车

三农

军事

旅行

运动

教育

生活

星座命理

CSS滤镜效果完全指南：filter和backdrop-filter的使用方法

创作时间:

作者:

@小白创作中心

CSS滤镜效果完全指南：filter和backdrop-filter的使用方法

引用

来源

https://ithelp.ithome.com.tw/articles/10359068

本文将详细介绍CSS中的滤镜效果，包括filter和backdrop-filter属性的使用方法。通过本文的学习，你将掌握如何使用CSS实现模糊、亮度调整、对比度调整、灰度转换、色相旋转、反色、透明度调整、棕褐色调、饱和度调整以及阴影效果。同时，你还将了解如何使用backdrop-filter实现毛玻璃效果，并掌握渐进式模糊的实现方法。

一、滤镜（filter）

filter属性能让开发者对HTML元素本身进行一系列图像处理效果，无需使用绘图软件即可实现各种特效，例如模糊、明度、对比度等。

基本语法

filter的使用语法很简单，如下所示：

div {
    filter: 方法(数值);
}

特效效果

filter提供了多种效果可供使用：

blur：模糊，需要填写数值，单位可以是px、em、rem等。
brightness：明度，调整亮度，需要填写百分比值：100%为原本的明度，往下是调暗，往上是调亮。
contrast：对比度，调整对比度，需要填写百分比值：100%为原本的对比度，往下是减低，往上是增加。
grayscale：灰阶，转为灰阶，需要填写0到1之间的值，1代表完全灰阶。
hue-rotate：色相，调整色相环的位置，需要填写角度，单位可以是deg（度数）或turn（圈数）。
invert：反转，转为相反的颜色，会变成对比色，需要填写0到1之间的值，1代表完全相反。
opacity：透明度，调整透明度，需要填写百分比值：100%为不透明，效果等同于opacity: 数值;。
sepia：棕褐色，转为怀旧的褐色调，需要填写0到1之间的值，1代表完全褐色。
saturate：饱和度，调整饱和度，需要填写百分比值：100%为原本的对对比度，往下是减低，往上是增加。
drop-shadow：阴影，在图片中非透明的周围加上阴影，这针对透明图片超好用！

多重特效

你也可以使用多种特效在一个HTML元素上，只要简单使用空格隔开就好了，例如：

div {
    filter: contrast(175%) brightness(105%);
}

二、背景滤镜（backdrop-filter）

backdrop-filter可以对HTML元素后面的背景制作滤镜效果，影响的是背后的东西，而不是自己本身。最常见的是用来制作非常受欢迎的“毛玻璃效果 Glassmorphism”，利用模糊区隔出背景，制造出透明感的景深效果，最常见被用在iOS系统中、弹跳视窗光箱（lightbox）或是导航栏（Navbar）上等等。

基本语法

backdrop-filter的使用方式，基本上和filter一样：

div {
    backdrop-filter: 方法(数值);
}

特效效果

backdrop-filter通常用在浮动的HTML元素上（如：绝对定位、固定定位、sticky等等）。它可使用的效果和filter一样，但是经测试，opacity和drop-shadow不起作用。

多重特效

和filter一样，你也可以使用多种特效在一个HTML元素上，只要简单使用空格隔开就好了，例如：

.element {
  backdrop-filter: blur(10px) brightness(60%);
}

上面的例子会将元素后面的背景模糊处理，并且使其稍微变暗（亮度调低至60%）。这样可以做出类似黑色毛玻璃效果。

三、渐进式模糊（Progressive blur）

会用backdrop-filter后，搭配CSS mask语法规则，我们可以进一步制作渐进式模糊。渐进式模糊（Progressive blur）就是UI中照片下半部会逐渐模糊，然后下方显示其他文字信息等。

这种背景模糊的UI，在Apple的iOS UI中很常出现这种效果（例如：Apple Invites），过去在网页上很难做到，但是现在只要灵活运用这两个语法规则就能做到！

DEMO

这边我们在有背景图的div上，新增一个满版的伪元素::before，并且设定背景滤镜backdrop-filter，然后再透过CSS mask线性渐层调整模糊的范围，就可以做到啦！

.photo{
    position: relative;
    overflow: hidden;
    background-image: url("image.jpg");
    background-size: cover;
    overflow: hidden;
    &::before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        backdrop-filter: blur(10px);
        mask: linear-gradient(180deg, transparent 350px, #000 450px);
    }
}

DEMO 連結：CSS Progressive Blur