CSS：filter滤镜详解（用法 + 代码 + 例子 + 效果）

CSS的filter属性被用来应用图像的视觉效果，比如模糊或者对比度调整。filter属性可以应用多种不同类型的函数。

以下是filter属性的一些常用值：

grayscale(): 将图像转换为灰度图像。接受一个0到1之间的值来调整灰度级别。
sepia(): 将图像转换为深褐色。接受一个0到1之间的值来调整深褐色级别。
saturate(): 调整图像的饱和度。接受一个0到无穷之间的值。
hue-rotate(): 旋转图像的色相轮廓。接受一个角度值，例如hue-rotate(90deg)。
invert(): 反转图像颜色。接受一个0到1之间的值来调整反转程度。
opacity(): 调整图像的不透明度。接受一个0到1之间的值。
brightness(): 调整图像的亮度。接受一个0到1之间的值。
contrast(): 调整图像的对比度。接受一个0到1之间的值。
blur(): 对图像应用高斯模糊。接受一个像素值来定义模糊半径。
drop-shadow(): 给图像设置一个阴影效果，类似于box-shadow属性。

下面是一些使用filter属性的例子：




<!DOCTYPE html>
<html>
<head>
<style>
/* 灰度图像 */
.gray-image {
  filter: grayscale(1);
}
 
/* 深褐色图像 */
.sepia-image {
  filter: sepia(1);
}
 
/* 亮度提升 */
.brighter-image {
  filter: brightness(2);
}
 
/* 对比度降低 */
.lower-contrast-image {
  filter: contrast(0.5);
}
 
/* 模糊效果 */
.blur-image {
  filter: blur(10px);
}
 
/* 阴影效果 */
.shadow-image {
  filter: drop-shadow(16px 16px 20px red);
}
</style>
</head>
<body>
 
<img src="image.jpg" alt="Original Image">
<img class="gray-image" src="image.jpg" alt="Grayscale Image">
<img class="sepia-image" src="image.jpg" alt="Sepia Image">
<img class="brighter-image" src="image.jpg" alt="Brighter Image">
<img class="lower-contrast-image" src="image.jpg" alt="Lower Contrast Image">
<img class="blur-image" src="image.jpg" alt="Blurred Image">
<img class="shadow-image" src="image.jpg" alt="Shadowed Image">
 
</body>
</html>

在这个例子中，我们有一个原始的图像，然后应用了多种滤镜效果。你可以通过调整每个类中filter属性的值来看到不同的效果。

CSS：filter滤镜详解（用法 + 代码 + 例子 + 效果）

评论已关闭

推荐阅读