css filter属性常用的滤镜函数包括blur(radius)用于模糊效果、brightness(amount)调整亮度、contrast(amount)调整对比度、grayscale(amount)灰度化、hue-rotate(angle)色相旋转、saturate(amount)调整饱和度、sepia(amount)模拟老照片、drop-shadow添加阴影。这些函数可单独使用，也可通过空格分隔组合应用，浏览器按顺序执行。使用时需注意兼容性（ie不支持）、性能影响（复杂滤镜链可能降低性能）及动画优化技巧（如gpu加速、will-change属性）。此外，backdrop-filter作用于元素背后内容，与filter不同。
CSS的filter属性，说白了，就是把Photoshop里那些图像处理滤镜的功能，直接搬到了浏览器里。它允许你无需修改原始图像文件，就能实时地对图片（甚至任何HTML元素）应用各种视觉效果，比如模糊、变亮、变暗、灰度化，甚至是色相旋转，这对于前端开发者来说，简直是动态视觉效果的利器。
想要给图像添加滤镜，核心就是使用CSS的filter属性。它的语法非常直观，你只需要在CSS规则中为目标元素指定filter属性，然后跟上一个或多个滤镜函数。每个函数都有自己特定的参数来控制效果的强度。
比如，你想让一张图片变得模糊一点，可以这么写：
立即学习“前端免费学习笔记（深入）”；
img {
filter: blur(5px); /* 让图片模糊5像素 */
}如果你想让它变成黑白色，同时又带点亮度，那就可以像这样把多个滤镜函数串联起来：
img {
filter: grayscale(100%) brightness(120%); /* 先灰度化，再提高亮度 */
}浏览器会按照你定义的顺序，从左到右依次应用这些滤镜效果。这提供了一种非破坏性的图像处理方式，图片本身还是那张图片，只是在显示的时候被“蒙上”了一层视觉效果。
filter属性之所以强大，是因为它内置了多种实用的滤镜函数，每个都有其独特的视觉表现力。我个人最常用的，或者说在日常开发中出镜率比较高的，大概有这么几个：
blur(radius): 这是我用来做背景虚化效果的首选。参数radius定义了模糊的程度，单位可以是像素（px）。比如，blur(10px)会让元素看起来像隔了一层毛玻璃。用在背景图上，配合文字，效果简直不要太好。
.hero-background {
filter: blur(8px);
}brightness(amount): 调整元素的亮度。1代表原始亮度，小于1会变暗，大于1会变亮。比如，brightness(0.5)会让图片暗一半，而brightness(1.5)则会让它亮一半。这在做图片悬停效果时，稍微提亮或压暗，能带来不错的交互反馈。
.product-image:hover {
filter: brightness(1.1); /* 鼠标悬停时稍微提亮 */
}contrast(amount): 调整元素的对比度。和brightness类似，1是原始对比度。contrast(2)会让颜色对比更强烈，contrast(0.5)则会显得平淡。有时候图片颜色不够鲜明，加一点对比度就能让它“活”起来。
.vintage-photo {
filter: contrast(1.8); /* 增加对比度，增强复古感 */
}grayscale(amount): 将元素转换为灰度图像。0是彩色，1（或100%）是完全的灰度。想做那种“老照片”或者“未激活”的状态，这个滤镜简直是量身定制。
.inactive-icon {
filter: grayscale(100%);
}hue-rotate(angle): 改变元素的色相。参数angle以度（deg）为单位，0deg是原始色相，360deg也是原始色相，中间的值会旋转色轮上的颜色。这玩意儿玩起来特别有意思，能瞬间改变图片的主色调，做出一些意想不到的艺术效果。
.mood-changer {
filter: hue-rotate(90deg); /* 改变色相，制造不同氛围 */
}saturate(amount): 调整元素的饱和度。1是原始饱和度，大于1颜色会更鲜艳，小于1则会更灰暗。和contrast有点像，但它更侧重颜色的纯度。
.vibrant-thumbnail {
filter: saturate(1.5); /* 让颜色更饱和 */
}sepia(amount): 将元素转换为深褐色调，模拟老照片效果。0是彩色，1（或100%）是完全的深褐色。
.old-paper {
filter: sepia(100%);
}drop-shadow(h-shadow v-shadow blur-radius spread-radius color): 给元素添加一个或多个阴影。这个和box-shadow有点像，但drop-shadow是作用于元素内容的不透明部分，比如一个PNG图片的透明区域不会有阴影，而box-shadow会给整个盒子添加阴影。在给不规则图形加阴影时，drop-shadow效果更自然。
.custom-shape {
filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.5));
}这些函数可以单独使用，也可以像前面说的，通过空格分隔组合起来，实现更复杂的视觉效果。
组合使用滤镜是filter属性最有趣也最强大的地方之一。想象一下，你不仅仅是想让图片模糊，还想让它变暗一点，或者在变暗的同时，再加点老照片的泛黄效果。这在filter里是完全可行的，而且非常简单。
关键在于，你只需要在filter属性的值里，用空格把不同的滤镜函数隔开就行了。浏览器会按照你写的顺序，一个接一个地应用这些效果。
举个例子，我最近在做一个产品展示页面，想让那些“已售罄”的产品图片看起来暗淡、模糊，并且带点灰度，来明确区分。我就是这么处理的：
.sold-out-product-image {
filter: grayscale(80%) brightness(50%) blur(3px);
transition: filter 0.3s ease-in-out; /* 加个过渡，效果更平滑 */
}这里，图片会先被处理成80%的灰度，然后亮度降到50%，最后再模糊3像素。如果你把顺序换一下，比如先模糊再灰度，效果可能会有细微的差别，但通常情况下，对于这种叠加效果，视觉上的差异可能不那么明显，更多的是一种逻辑上的处理顺序。
需要注意的是，滤镜的叠加可能会对性能产生一些影响，特别是当你链式调用了大量复杂的滤镜，或者应用于大型元素时。浏览器需要进行更多的像素计算。所以，在追求酷炫效果的同时，也得考虑一下用户的设备性能，别把页面搞得卡顿。
虽然filter属性用起来很爽，但作为开发者，我们总得留个心眼，看看它在实际应用中可能遇到的坑。
1. 兼容性： 大部分现代浏览器对filter属性的支持已经非常好了，包括Chrome、Firefox、Safari、Edge等。IE浏览器嘛，就别指望了，它基本不怎么支持。如果你需要兼容老旧的IE浏览器，可能得考虑使用SVG滤镜或者直接处理图片。不过，现在IE的市场份额已经很小了，很多项目都可以直接忽略它的兼容性。如果你不确定，可以去caniuse.com上查一下最新的支持情况。通常，我会在项目初期就明确兼容性范围，避免后期返工。
2. 性能考量：filter属性的计算是比较消耗性能的，尤其是当你对大尺寸图片、视频，或者大量元素应用复杂滤镜链时。这是因为浏览器需要对每个像素进行实时计算。
3. backdrop-filter的差异： 这里顺便提一句backdrop-filter，它和filter名字很像，但功能完全不同。backdrop-filter是给元素“后面”的内容添加滤镜效果，而不是元素本身。比如，你想做一个毛玻璃效果的导航栏，让它下面的内容模糊掉，那就得用backdrop-filter。它的兼容性比filter稍差一些，尤其是在Firefox上，需要注意。
总的来说，filter是一个非常棒的CSS特性，能让我们的页面视觉效果更上一层楼。但在使用时，保持对性能和兼容性的警惕，合理运用，才能真正发挥它的价值。
上文就是CSS的filter属性怎么添加图像滤镜？的内容了，文章的版权归原作者所有，如有侵犯您的权利，请及时联系本站删除，更多相关cssfilter的资讯，请关注收藏西西下载站。
