CSS滤镜（CSS Filters

**CSS滤镜（CSS Filters）**允许你为网页元素应用视觉效果，如模糊、亮度调整、对比度调整、颜色叠加等。滤镜可以应用于图像、背景、边框、文字等任何可应用滤镜的元素。通过滤镜，可以轻松实现各种视觉增强效果，而无需使用图像编辑软件。下面将详细介绍CSS滤镜的概念、属性以及如何使用它，并提供相应的示例。

 

1. 滤镜概述

 

CSS滤镜通过 filter 属性来应用各种视觉效果。滤镜可以应用于任何支持 filter 属性的元素，如 <img> 、 <div> 、 <p> 等。滤镜效果可以是静态的，也可以通过CSS动画实现动态效果。

 

2. 滤镜属性

 

2.1 filter

 

filter: 定义应用于元素的滤镜效果。

常用的滤镜函数包括：

 blur() : 模糊

 brightness() : 亮度

 contrast() : 对比度

 grayscale() : 灰度

 sepia() : 褐色

 hue-rotate() : 色相旋转

 invert() : 反转

 opacity() : 透明度

 saturate() : 饱和度

 drop-shadow() : 阴影

 

2.2 常用滤镜函数

 

blur(): 添加模糊效果。

 

 

.blur {

  filter: blur(5px);

}

 

brightness(): 调整亮度。

 

 

.brightness {

  filter: brightness(150%);

}

 

contrast(): 调整对比度。

 

 

.contrast {

  filter: contrast(200%);

}

 

grayscale(): 转换为灰度图像。

 

 

.grayscale {

  filter: grayscale(100%);

}

 

sepia(): 添加褐色效果。

 

 

.sepia {

  filter: sepia(100%);

}

 

hue-rotate(): 旋转色相。

 

 

.hue-rotate {

  filter: hue-rotate(90deg);

}

 

invert(): 反转颜色。

 

 

.invert {

  filter: invert(100%);

}

 

opacity(): 调整透明度。

 

 

.opacity {

  filter: opacity(50%);

}

 

saturate(): 调整饱和度。

 

 

.saturate {

  filter: saturate(200%);

}

 

drop-shadow(): 添加阴影效果。

 

 

.drop-shadow {

  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));

}

 

 

3. 示例

 

示例1：模糊效果

 

 

<img src="image.jpg" alt="Example Image" class="blur-image">

 

 

 

.blur-image {

  width: 300px;

  filter: blur(10px);

}

 

 

解释：

 

 .blur-image  图像应用了10px的模糊效果。

 

示例2：亮度调整

 

 

<div class="brightness-box"></div>

 

 

 

.brightness-box {

  width: 200px;

  height: 200px;

  background-color: #4CAF50;

  filter: brightness(80%);

}

 

 

解释：

 

 .brightness-box  元素应用了80%的亮度，使其颜色变暗。

 

示例3：对比度调整

 

 

<img src="image.jpg" alt="Example Image" class="contrast-image">

 

 

 

.contrast-image {

  width: 300px;

  filter: contrast(150%);

}

 

 

解释：

 

 .contrast-image  图像应用了150%的对比度，使其颜色更加鲜明。

 

示例4：灰度效果

 

 

<img src="image.jpg" alt="Example Image" class="grayscale-image">

 

 

 

.grayscale-image {

  width: 300px;

  filter: grayscale(100%);

}

 

 

解释：

 

 .grayscale-image  图像应用了100%的灰度效果，使其变为黑白图像。

 

示例5：动态调整

 

 

<div class="opacity-box"></div>

 

 

 

.opacity-box {

  width: 200px;

  height: 200px;

  background-color: #4CAF50;

  filter: opacity(50%);

}

 

 

解释：

 

 .opacity-box  元素应用了50%的透明度，使其半透明。

 

示例6：阴影效果

 

 

<img src="image.jpg" alt="Example Image" class="shadow-image">

 

 

 

.shadow-image {

  width: 300px;

  filter: drop-shadow(5px 5px 5px rgba(0,0,0,0.3));

}

 

 

解释：

 

 .shadow-image  图像应用了5px的阴影效果，使其具有立体感。

 

4. 动态滤镜效果

 

通过CSS动画，可以实现动态滤镜效果。例如，创建一个不断变化的模糊效果。

 

 

<div class="animated-filter-box"></div>

 

 

 

.animated-filter-box {

  width: 200px;

  height: 200px;

  background-color: #4CAF50;

  animation: blurAnimation 2s infinite;

}

 

@keyframes blurAnimation {

  0% {

    filter: blur(0px);

  }

  50% {

    filter: blur(10px);

  }

  100% {

    filter: blur(0px);

  }

}

 

 

解释：

 

 .animated-filter-box  元素应用了动态模糊效果，模糊值在0px到10px之间不断变化。

 

5. 总结

 

filter: 定义应用于元素的滤镜效果。

常用滤镜函数:  blur() ,  brightness() ,  contrast() ,  grayscale() ,  sepia() ,  hue-rotate() ,  invert() ,  opacity() ,  saturate() ,  drop-shadow() 

 

通过这些属性和示例，你可以为网页元素添加各种视觉效果，使界面更加丰富和动态。希望这些详细的解释和示例能帮助你更好地掌握CSS中的滤镜。