CSS中filter()函数如何实现滤镜效果？通过filter()调整元素的模糊或亮度-css教程-PHP中文网

CSS中filter()函数如何实现滤镜效果？通过filter()调整元素的模糊或亮度

蓮花仙者

发布： 2025-08-29 11:56:01

原创

980人浏览过

CSS filter()函数可对HTML元素实现模糊、亮度调整等视觉效果，其通过GPU加速提升性能，支持blur()、brightness()及多种滤镜组合，常用于毛玻璃、悬停反馈、背景优化等场景，且可通过backdrop-filter区分作用对象，兼顾表现力与非破坏性设计。

css中filter()函数如何实现滤镜效果？通过filter()调整元素的模糊或亮度

CSS中的

filter()

登录后复制

函数就像是一个数字化的调色板，它允许我们直接在浏览器中对任何HTML元素，包括图片、文本乃至整个布局，应用各种视觉效果，而无需借助外部图像编辑软件。它提供了一种非侵入性、高性能的方式来调整元素的视觉表现，其中，模糊（

blur

登录后复制

）和亮度（

brightness

登录后复制

）是开发者最常用来快速改变元素视觉感受的两种强大工具。

filter()

登录后复制

函数的核心在于它提供了一系列预定义的滤镜操作，这些操作可以单独使用，也可以组合起来，形成复杂的视觉效果。当浏览器渲染一个应用了

filter()

登录后复制

的元素时，它实际上是在绘制该元素之前，先对其进行一系列图形处理。这些处理是基于图形处理器（GPU）加速的，因此通常能保持流畅的动画效果。

深入理解CSS filter()函数的工作原理及其应用场景

我个人觉得，

filter()

登录后复制

函数最迷人的地方在于它在Web开发中引入了一种“所见即所得”的图像处理思维。它与传统图像处理软件中的滤镜效果在概念上非常相似，比如Photoshop里的“高斯模糊”或“亮度/对比度”调整。但不同之处在于，CSS

filter()

登录后复制

直接作用于DOM元素，是实时的、非破坏性的，并且完全由浏览器渲染引擎控制。这意味着你可以在不修改原始图片文件的情况下，动态地调整图片的外观，甚至是对文本、背景或SVG图形应用这些效果。

立即学习“前端免费学习笔记（深入）”；

从技术层面看，

filter()

登录后复制

函数实际上是基于SVG滤镜的简化抽象。浏览器内部可能会将其转换为一系列的SVG滤镜原语（filter primitives）来执行。这使得它能够利用GPU的强大计算能力，高效地处理像素数据。例如，当应用

blur()

登录后复制

时，浏览器会对目标元素的每个像素进行计算，将其周围像素的颜色值进行平均，从而产生模糊效果；而

brightness()

登录后复制

则是调整每个像素的亮度分量。这种机制使得开发者可以像操作图层一样，对Web元素进行精细的视觉调整，为用户界面带来更丰富的表现力。

如何通过filter()精确控制元素的模糊度？

要实现元素的模糊效果，我们主要使用

blur()

登录后复制

函数。它接受一个长度值作为参数，通常是

px

登录后复制

，表示模糊半径。这个值越大，元素看起来就越模糊。

我发现很多时候，我们不需要非常夸张的模糊效果，反而是一些细微的模糊能带来意想不到的质感。比如，在背景图片上叠加一层半透明的蒙版，再给背景图片加一点点

blur(3px)

登录后复制

，就能做出那种“磨砂玻璃”或者“景深”的效果，让前景内容更加突出。

例如，给一张图片添加模糊：

img {
  filter: blur(5px); /* 给图片添加5像素的模糊 */
}

登录后复制

如果你想实现一个类似macOS那种毛玻璃效果的导航栏，你可以这样做：

<div class="background-image"></div>
<nav class="frosted-glass">
  <!-- 导航内容 -->
</nav>

登录后复制

.background-image {
  /* ...背景图片样式... */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.frosted-glass {
  position: fixed;
  top: 0;
  width: 100%;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.6); /* 半透明背景 */
  backdrop-filter: blur(10px); /* 注意这里是backdrop-filter，它作用于元素下方的区域 */
  /* 如果只是想模糊导航栏自身的内容，用filter: blur(10px); */
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  padding: 0 20px;
  /* ...其他样式... */
}

登录后复制

这里我特意提到了

backdrop-filter

登录后复制

，它和

filter

登录后复制

虽然都带

filter

登录后复制

，但作用对象不同。

filter

登录后复制

作用于元素自身，而

backdrop-filter

登录后复制

则作用于元素“后面”的内容，这在实现毛玻璃效果时非常关键，因为我们通常希望模糊的是导航栏后面的背景，而不是导航栏本身的内容。

如何利用filter()调整元素的亮度以优化视觉呈现？

火龙果写作

用火龙果，轻松写作，通过校对、改写、扩展等功能实现高质量内容生产。

106

查看详情

调整元素的亮度，我们使用

brightness()

登录后复制

函数。它接受一个百分比值或一个无单位的数字作为参数。

100%

登录后复制

（或

登录后复制

）表示原始亮度，小于

100%

登录后复制

会使元素变暗，大于

100%

登录后复制

则会使元素变亮。

我经常在设计交互效果时用到

brightness()

登录后复制

。比如，当用户鼠标悬停在一张图片上时，我希望图片稍微变亮或变暗，以提供视觉反馈。这种微小的亮度变化比改变图片大小或边框颜色来得更自然、更优雅。

例如，让图片在鼠标悬停时变亮：

img {
  transition: filter 0.3s ease-in-out; /* 添加过渡效果 */
}

img:hover {
  filter: brightness(1.2); /* 鼠标悬停时亮度增加20% */
}

登录后复制

另一个实用场景是，当你在图片上叠加文本时，如果图片背景过亮或过暗，可能会导致文本难以阅读。这时，你可以对图片应用

brightness()

登录后复制

来调整其亮度，确保文本有足够的对比度。

.hero-section {
  background-image: url('your-image.jpg');
  background-size: cover;
  background-position: center;
  /* 对背景图片应用滤镜，这里需要一个伪元素或者嵌套元素来承载滤镜 */
  position: relative;
  color: white; /* 确保文本颜色与调整后的背景对比度足够 */
}

.hero-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 添加一个半透明的黑色蒙层 */
  filter: brightness(0.7); /* 进一步调暗背景，确保文本可读性 */
  z-index: 1;
}

.hero-section .content {
  position: relative;
  z-index: 2;
  /* ...文本内容样式... */
}

登录后复制

这里我用了一个伪元素来承载滤镜和蒙层，这样可以避免直接对

hero-section

登录后复制

应用

filter

登录后复制

，因为那样会影响到它内部的文本内容。这种分离的思路在实际开发中非常常见，能让你更灵活地控制效果。

filter()函数支持哪些高级滤镜效果？如何组合使用以创造更复杂的视觉风格？

除了

blur()

登录后复制

和

brightness()

登录后复制

，

filter()

登录后复制

函数还提供了许多其他强大的滤镜，它们能帮助我们创造出更丰富的视觉效果：

```
contrast()
```
登录后复制
：调整元素的对比度。
```
grayscale()
```
登录后复制
：将元素转换为灰度图像。
```
hue-rotate()
```
登录后复制
：改变元素的色相（颜色）。
```
invert()
```
登录后复制
：反转元素的颜色。
```
opacity()
```
登录后复制
：调整元素的透明度（与
```
opacity
```
登录后复制
属性类似，但这里是作为滤镜）。
```
saturate()
```
登录后复制
：调整元素的饱和度。
```
sepia()
```
登录后复制
：将元素转换为褐色调。
```
drop-shadow()
```
登录后复制
：给元素添加阴影（与
```
box-shadow
```
登录后复制
类似，但可以作用于透明区域）。

这些滤镜可以非常方便地组合使用，只要在

filter

登录后复制

属性中用空格隔开即可。滤镜的顺序很重要，因为它会影响最终的视觉效果。浏览器会按照你写的顺序依次应用这些滤镜。

举个例子，如果我想让一张图片变成复古的黑白照片，并且带一点点模糊和阴影：

.retro-photo {
  filter: grayscale(100%) sepia(50%) blur(1px) drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
  transition: filter 0.5s ease;
}

.retro-photo:hover {
  filter: grayscale(0%) sepia(0%) blur(0px) drop-shadow(0px 0px 0px rgba(0, 0, 0, 0)); /* 鼠标悬停时恢复原状 */
}

登录后复制

在这个例子中，图片先被转换为灰度，然后叠加了50%的褐色调，接着轻微模糊，最后添加了一个阴影。这种组合方式让我能在一个CSS属性里就实现多重效果，极大地提高了开发效率和代码的整洁性。

我个人在使用