filter 是 CSS 中一种强大的图像过滤效果，可以应用各种滤镜来改变图像的外观。它允许我们对图像进行各种各样的处理，如模糊、亮度调节、对比度调节、色彩转换等。
在这篇博客中，我们将深入探讨 CSS filter 的各种滤镜效果，并提供一些示例来帮助你更好地理解和应用它们。
CSS filter 滤镜类型
CSS filter 提供了多种滤镜类型，包括：
blur()：模糊滤镜，用于使图像变得模糊。
brightness()：亮度滤镜，用于调节图像的亮度。
contrast()：对比度滤镜，用于调节图像的对比度。
grayscale()：灰度滤镜，用于将图像转换为灰度图像。
hue-rotate()：色调旋转滤镜，用于旋转图像的色调。
invert()：反转滤镜，用于反转图像的颜色。
opacity()：透明度滤镜，用于调节图像的透明度。
saturate()：饱和度滤镜，用于调节图像的饱和度。
sepia()：褐色滤镜，用于将图像转换为褐色色调。
除了以上基本滤镜类型，filter 还支持一些组合滤镜，如blur()和opacity()的组合，以及一些高级滤镜，如drop-shadow()和filter()。
背景相关属性主要有：
background-color背景颜色
background-image背景图片
background-repeat是否平铺repeat(默认平铺)|repeat-x(水平平铺)|repeat-y(垂直平铺)|no-repeat(不平铺)
background-position背景位置length(百分数)|position(topcenterbuttonleftright)一般两个一起用，如果至指定一个方向另一个方向默认为center，两种方法也可以混搭。方位名词没有顺序区分，而使用百分数时时有顺序的，先是水平后是垂直
background-attachment背景固定还是滚动scroll|fixed
background:背景颜色背景图片是否平铺背景固定还是滚动背景位置。
