在 CSS 中，我们无需借助任何软件也可以实现很多种滤镜效果，例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外，通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。

滤镜描述none默认值，表示没有效果blur(px)为图像设置高斯模糊，默认值为 0，单位为像素，值较大越模糊brightness(%)调整图像的亮度，默认值为 100％，代表原始图像；0％ 表示没有亮度，图像将完全变黑；当值超过 100％ 时图像将变得更亮contrast(%)调整图像的对比度，默认值为 100％，代表原始图像；0％ 将使图像完全变黑；当值超过 100％ 时图像将获得更高的对比度invert(%)反转图像，默认值为 0%，表示原始图像；100% 则表示完全反转，不允许使用负值opacity(%)设置图像的不透明度，默认值为 100%，表示原始图像；0% 表示完全透明，不允许使用负值saturate(%)设置图像的饱和度，默认值为 100%，表示原始图像；0% 表示图像完全不饱和，不允许使用负值sepia(%)将图像转换为棕褐色，默认值为 0%，表示原始图像；100% 表示图像完全变成棕褐色，不允许使用负值grayscale(%)将图像转换为灰度图像，默认值为 0%，表示原始图像；100％ 表示将图像完全变成灰度图像（即黑白图像），不允许为负值drop-shadow(h-shadow v-shadow blur spread color)为图像添加阴影效果，参数说明如下： h-shadow：必填值，指定水平方向阴影的像素值，若值为负，则阴影会出现在图像的左侧；v-shadow：必填值，指定垂直方向阴影的像素值，若值为负，则阴影会出现在图像的上方；blur：可选值，为阴影添加模糊效果，默认值为 0，单位为像素，值越大创建的模糊就越多（阴影会变得更大更亮），不允许使用负值；spread：可选值，默认值为 0，单位为像素。若值为正，则阴影将会扩展并增大；若值为负，则阴影会缩小；color：可选值，为阴影添加颜色，如未指定，则由浏览器来绝对，通常为黑色。

img { width: 250px; height: 200px; } .img1 { /* 模糊半径2px */ /* -webkit-filter: blur(2px); */ filter: blur(2px); } .img2 { /* 图像亮度 */ filter: brightness(0.5); } .img3 { /* 对比度 */ filter: contrast(150%); } .img4 { /* 阴影效果 */ filter: drop-shadow(4px 4px 20px red); } .img5 { /* 图像灰度转换 */ filter: grayscale(50%); } .img6 { /* 页面反转，设置胶片效果 */ filter: invert(100%); } .img7 { /* 透明度 */ filter: opacity(80%); } .img8 { /* 图片棕褐色 */ filter: sepia(90%); } .img9{ /* 图像饱和度 */ filter: saturate(200%); }

?图片效果如下：

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。