CSS 面试题
目录

如何使用 CSS 的 filter 属性实现图片滤镜效果？

· 约 6 分钟读完 · 第 44 / 99 章

推荐答案

使用 CSS 的 filter 属性可以实现多种图片滤镜效果。filter 属性允许你向元素（通常是图片）添加视觉效果，例如模糊、对比度调整、颜色变换等。以下是一些常见的 filter 属性值及其效果：

  • blur(px): 模糊图像。 px 值越大，模糊程度越高。
  • brightness(%): 调整图像亮度。100% 为原始亮度，小于 100% 变暗，大于 100% 变亮。
  • contrast(%): 调整图像对比度。100% 为原始对比度，小于 100% 降低对比度，大于 100% 提高对比度。
  • grayscale(%): 将图像转换为灰度图。100% 为完全灰度，0% 为原始图像。
  • hue-rotate(deg): 旋转图像的色相。0deg 为原始图像，360deg 为一周旋转。
  • invert(%): 反转图像颜色。100% 为完全反转，0% 为原始图像。
  • opacity(%): 调整图像透明度。100% 为完全不透明，0% 为完全透明。
  • saturate(%): 调整图像饱和度。100% 为原始饱和度，小于 100% 降低饱和度，大于 100% 提高饱和度。
  • sepia(%): 将图像转换为棕褐色调。100% 为完全棕褐色，0% 为原始图像。
  • drop-shadow(h-offset v-offset blur spread color): 给图像添加阴影。

这些值可以单独使用，也可以组合使用，实现更复杂的效果。例如：

本题详细解读

filter 属性是 CSS3 中引入的一个强大特性，它为我们提供了一种简便的方式来处理图像的视觉效果，无需使用复杂的 JavaScript 或者图像编辑软件。下面我们更深入地探讨一下它的一些关键点：

1. 语法：

filter 属性通常应用于图像元素 (<img>)，但也可以用于其他类型的元素，例如 <div> 或 <span>。其基本语法如下：

  • none: 表示不应用任何滤镜效果，这是默认值。
  • <filter-function>: 一个或多个滤镜函数，之间用空格分隔。 例如：filter: blur(5px) grayscale(50%);

2. 常用滤镜函数详解：

  • blur(px):
    • 参数是一个长度值（px、em、rem 等）。
    • 值越大，模糊程度越高，0 值表示没有模糊效果。
    • 可用于实现背景模糊等效果。
  • brightness(%):
    • 参数是一个百分比值。
    • 100% 代表原始亮度，小于 100% 会使图像变暗，大于 100% 会使图像变亮。
    • 值可以是小数，例如 120% 或 80%。
  • contrast(%):
    • 参数是一个百分比值。
    • 100% 代表原始对比度，小于 100% 会降低对比度，大于 100% 会增加对比度。
    • 值可以是小数，例如 110% 或 70%。
  • grayscale(%):
    • 参数是一个百分比值。
    • 100% 代表完全灰度，0% 代表原始图像，中间值表示不同程度的灰度。
  • hue-rotate(deg):
    • 参数是一个角度值（deg、grad、rad 或 turn）。
    • 将图像的色相进行旋转， 0deg 代表原始图像。
    • 当角度超过 360deg 时，会回到起始点继续旋转。
  • invert(%):
    • 参数是一个百分比值。
    • 100% 代表颜色完全反转，0% 代表原始图像，中间值表示不同程度的反转。
  • opacity(%):
    • 参数是一个百分比值。
    • 100% 代表完全不透明，0% 代表完全透明。
    • 值可以是小数，例如 50% 代表半透明。
  • saturate(%):
    • 参数是一个百分比值。
    • 100% 代表原始饱和度，小于 100% 会降低饱和度，大于 100% 会增加饱和度。
  • sepia(%):
    • 参数是一个百分比值。
    • 100% 代表完全棕褐色调，0% 代表原始图像，中间值表示不同程度的棕褐色调。
  • drop-shadow(h-offset v-offset blur spread color):
    • 参数较多，依次为水平偏移、垂直偏移、模糊半径、阴影扩展半径和阴影颜色。
    • 可以创建更复杂的阴影效果，而不是简单的盒阴影。

3. 组合使用：

可以组合多个 filter 函数来实现更复杂的效果，例如：

这个示例会将图片模糊，稍微调亮，并应用少量的灰度效果。

4. 性能考量：

  • filter 属性通常由浏览器硬件加速处理，性能较好。
  • 但是，过度使用或使用过于复杂的滤镜可能会影响页面渲染性能，尤其是在低性能设备上。
  • 建议在性能敏感的场景下，谨慎使用 filter 属性，并在必要时进行性能测试。

5. 兼容性：

  • filter 属性具有较好的浏览器兼容性，主流浏览器都支持。
  • 对于某些老旧浏览器，可以使用 CSS 前缀（例如 -webkit-filter）来兼容。
  • 可以使用 Autoprefixer 等工具来自动添加浏览器前缀。

6. 适用场景：

  • 图像处理: 比如调整图片亮度、对比度、饱和度，增加模糊效果等。
  • 悬停效果： 当鼠标悬停在图片上时改变其颜色、亮度等。
  • 背景模糊： 对背景进行模糊处理，营造视觉层次感。
  • 特殊视觉效果： 比如实现怀旧的棕褐色效果。

总而言之，filter 属性是 CSS 中一个非常有用的工具，它可以让我们在不使用 JavaScript 的情况下，轻松地为图像或元素添加各种视觉效果，提升用户体验。通过灵活运用不同的滤镜函数，可以实现丰富的视觉设计。

← 请解释 * { box-sizing: border-box; } 的作用。 如何使用 CSS 实现毛玻璃效果？ →