CSS滤镜示范(filter)附源代码(静态滤镜)

CSS滤镜是一种通过改变图像的色彩、亮度、对比度、饱和度等特性来实现视觉效果的技术。以下是CSS滤镜示范和源代码的完整攻略。

什么是CSS滤镜？

CSS滤镜是一种用于HTML元素的效果，可以对元素进行颜色、亮度、对比度、饱和度等方面的修改。这意味着你可以创建各种各样的视觉效果，也包括黑白或灰度效果、模糊效果等。

如何在CSS中实现滤镜效果？

在CSS中，你可以使用filter属性来实现滤镜效果。filter属性需要一个函数或多个函数组成的值。下面是一些最常用的滤镜函数：

• blur：用于创建模糊效果的函数。
• brightness：用于调整图片的亮度。
• contrast：用于调整图片的对比度。
• grayscale：用于将图片转换为黑白或灰度。
• hue-rotate：用于旋转图片的色彩。
• invert：用于反转图像的颜色。
• opacity：用于修改元素的透明度。
• saturate：用于调整图像的饱和度。
• sepia：用于将图像变为深褐色。

下面我们将介绍两个示例，来演示如何使用这些滤镜函数。

示例一：使用模糊滤镜创建毛玻璃效果

/* HTML代码: <div class="blur">Hello World</div> */

.blur {
  background-image: url("https://picsum.photos/800/400");
  height: 400px;
  width: 800px;
  position: relative;
}

.blur::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: inherit;
  filter: blur(4px);
}

在这个示例中，我们为一个具有背景图像的div元素创建了毛玻璃效果。我们使用了::before伪元素并将其定位到div元素的顶部。通过将background-image属性设为相对的div元素，::before元素将继承div元素的背景图像。另外，我们使用了blur()函数将::before元素模糊处理，从而实现了毛玻璃效果。

示例二：将图片转换为黑白滤镜

/* HTML代码: <img src="https://picsum.photos/800/400"> */

img {
  filter: grayscale(100%);
}

在这个示例中，我们将一个img元素转换为黑白滤镜。我们使用了grayscale()函数并将值设为100%来实现这个效果。

总结

至此，我们已经了解了如何使用CSS滤镜来实现各种效果，包括模糊效果和黑白效果等。你可以在这些示例代码上进行修改和实验，以达到更酷炫的效果！