CSS滤镜

CSS滤镜允许你对元素的视觉效果进行处理，如模糊、亮度、对比度、饱和度等。滤镜可以应用于图片、背景和其他HTML元素，创造出各种视觉效果。

滤镜基础

滤镜通过filter属性实现，它可以接受一个或多个滤镜函数作为值。

css 
.element {
  filter: blur(5px) brightness(1.5);
}

滤镜函数

blur()

对元素应用模糊效果。值越大，模糊程度越高。

css 
.element {
  filter: blur(5px);
}

brightness()

调整元素的亮度。值大于100%会增加亮度，小于100%会降低亮度。

css 
/* 增加亮度 */
.element {
  filter: brightness(1.5);
}

/* 降低亮度 */
.element {
  filter: brightness(0.5);
}

contrast()

调整元素的对比度。值大于100%会增加对比度，小于100%会降低对比度。

css 
/* 增加对比度 */
.element {
  filter: contrast(1.5);
}

/* 降低对比度 */
.element {
  filter: contrast(0.5);
}

drop-shadow()

给元素添加阴影效果。与box-shadow不同，drop-shadow会考虑元素的透明度。

css 
.element {
  filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
}

参数：

  • x-offset：水平偏移量
  • y-offset：垂直偏移量
  • blur-radius：模糊半径
  • color：阴影颜色

grayscale()

将元素转换为灰度图像。值为100%时完全灰度，0%时保持原色。

css 
.element {
  filter: grayscale(100%);
}

hue-rotate()

调整元素的色相旋转角度。

css 
.element {
  filter: hue-rotate(90deg);
}

invert()

反转元素的颜色。值为100%时完全反转，0%时保持原色。

css 
.element {
  filter: invert(100%);
}

opacity()

调整元素的透明度。与标准的opacity属性类似。

css 
.element {
  filter: opacity(0.5);
}

saturate()

调整元素的饱和度。值大于100%会增加饱和度，小于100%会降低饱和度。

css 
/* 增加饱和度 */
.element {
  filter: saturate(2);
}

/* 降低饱和度 */
.element {
  filter: saturate(0.5);
}

sepia()

将元素转换为棕褐色调。值为100%时完全棕褐色，0%时保持原色。

css 
.element {
  filter: sepia(100%);
}

url()

应用SVG滤镜。

css 
.element {
  filter: url(#svg-filter);
}

组合滤镜

可以同时应用多个滤镜，它们会按顺序执行。

css 
.element {
  filter: blur(2px) brightness(1.2) contrast(1.5) grayscale(50%);
}

滤镜示例

图片特效

css 
/* 复古照片效果 */
.vintage-photo {
  filter: sepia(80%) hue-rotate(-10deg) brightness(1.1) contrast(0.9);
}

/* 黑白照片效果 */
.black-white {
  filter: grayscale(100%);
}

/* 高对比度效果 */
.high-contrast {
  filter: contrast(2) brightness(0.9);
}

按钮悬停效果

css 
.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  transition: filter 0.3s ease;
}

.button:hover {
  filter: brightness(1.2) saturate(1.3);
}

毛玻璃效果

css 
.frosted-glass {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
}

注意：backdrop-filter与filter类似，但它只应用于元素后面的区域，而不是元素本身。

浏览器兼容性

CSS滤镜在现代浏览器中有很好的支持，但需要考虑旧版本浏览器的兼容性：

  • Chrome 53+
  • Firefox 35+
  • Safari 9.1+
  • IE 不支持
  • Edge 79+

对于旧版本浏览器的支持，可以添加浏览器前缀：

css 
.element {
  filter: blur(5px);
  -webkit-filter: blur(5px); /* Safari和Chrome */
}

性能考虑

  • 滤镜可能会影响性能，特别是在移动设备上
  • 避免在大型元素或多个元素上使用复杂的滤镜组合
  • 使用硬件加速可以提高滤镜性能
css 
.element {
  transform: translateZ(0); /* 启用硬件加速 */
  filter: blur(5px);
}