css滤镜介绍ppt |css公版系统

img{
filter: blur(5px);
}

CSS滤镜主要有以下几种类型:

• 模糊(blur) – 对图片进行模糊处理,值越大越模糊。
• 亮度(brightness) – 控制图片的亮度,值大于1则增加亮度,值小于1则降低亮度。
• 对比度(contrast) – 控制图片的对比度,值越大，对比度越高。
• 灰度(grayscale) – 将图片转化为灰度图像，值为100%则完全转化为灰度图像。
• 反转(invert) – 将图片颜色反转,值为100%则完全反转。

img{
filter: brightness(250%);
filter: grayscale(70%);
}

需要注意的是，CSS滤镜特性在一些浏览器中可能存在兼容性问题，需要进行多浏览器的兼容性测试。另外，为了获得最佳的视觉效果，设计师也可通过实验和试验，结合自己的审美体验，来调整滤镜的参数。