css3的过滤效果简单实例

下面我将为你详细讲解CSS3的过滤效果简单实例的完整攻略。

介绍

在CSS3中，过滤效果被称为“filter”。过滤效果可以使图像更有趣，更生动，或者在某些情况下另外增强视觉效果。通过使用filter属性，可以通过CSS样式来改变元素的外观。

入门指南

filter属性

filter属性可以像下面这样被用来改变元素的外观：

img {
  filter: blur(5px) grayscale(50%);
}

上面这个例子将应用一个5像素的模糊和一个50%的灰度滤镜在图片上。

CSS3过滤效果列表

下面是一些CSS3过滤效果：

模糊

img {
  filter: blur(5px);
}

这个例子将会在图片上应用一个5像素的模糊效果。

灰度

img {
  filter: grayscale(50%);
}

这个例子将会在图片上应用一个50%的灰度效果，使图片变成黑白色。

对比度

img {
  filter: contrast(200%);
}

这个例子将会在图片上应用一个200%的对比度效果。

饱和度

img {
  filter: saturate(200%);
}

这个例子将会在图片上应用一个200%的饱和度效果。

使用实例

例子一

在这个例子中，我们将使用一个灰度滤镜来改变图片的颜色。

img {
  filter: grayscale(100%);
}

上述代码将会在图片上覆盖一个100%的灰度滤镜。这将使得图片变成黑白色。

例子二

这个例子使用一个模糊滤镜来改变图片的外观。

img {
  filter: blur(5px);
}

上述代码将会在图片上应用一个5像素的模糊滤镜。

总结

CSS3的过滤效果为开发者提供了一种方便的方法来改变元素的外观。在这篇攻略中，我们介绍了一些常见的CSS3过滤效果，并给出了两个示例来描述如何使用这些效果。