关于CSS filter(滤镜)精准详解

对于滤镜,首先能想到的是Photoshop这样的制图软件,通过这种软件的滤镜可以美化照片。CSS可以实现多种滤镜效果,包括模糊、透明效果、调整颜色对比度、反转颜色等,而无需使用软件。此外,CSS中的筛选器还允许您处理网页中的元素或视频。本节介绍在CSS中使用过滤器。

CSS 中实现滤镜效果需要通过 filter 属性并配合一些函数来实现,如下所示:

滤镜 描述
none 默认值,表示没有效果
blur(px) 为图像设置高斯模糊,默认值为 0,单位为像素,值较大越模糊
brightness(%) 调整图像的亮度,默认值为 100%,代表原始图像;0% 表示没有亮度,图像将完全变黑;当值超过 100% 时图像将变得更亮
contrast(%) 调整图像的对比度,默认值为 100%,代表原始图像;0% 将使图像完全变黑;当值超过 100% 时图像将获得更高的对比度
drop-shadow(h-shadow v-shadow blur spread color) 为图像添加阴影效果,参数说明如下:

  • h-shadow:必填值,指定水平方向阴影的像素值,若值为负,则阴影会出现在图像的左侧;
  • v-shadow:必填值,指定垂直方向阴影的像素值,若值为负,则阴影会出现在图像的上方;
  • blur:可选值,为阴影添加模糊效果,默认值为 0,单位为像素,值越大创建的模糊就越多(阴影会变得更大更亮),不允许使用负值;
  • spread:可选值,默认值为 0,单位为像素。若值为正,则阴影将会扩展并增大;若值为负,则阴影会缩小;
  • color:可选值,为阴影添加颜色,如未指定,则由浏览器来绝对,通常为黑色。

注意:Chrome、Safari 和 Opera 等浏览器不支持第 4 个参数,如果添加,则不会有任何效果

grayscale(%) 将图像转换为灰度图像,默认值为 0%,表示原始图像;100% 表示将图像完全变成灰度图像(即黑白图像),不允许为负值
hue-rotate(deg) 给图像应用色相旋转,该值用来定义色环的度数,默认值为 0deg,代表原始图像,最大值为 360deg
invert(%) 反转图像,默认值为 0%,表示原始图像;100% 则表示完全反转,不允许使用负值
opacity(%) 设置图像的不透明度,默认值为 100%,表示原始图像;0% 表示完全透明,不允许使用负值
saturate(%) 设置图像的饱和度,默认值为 100%,表示原始图像;0% 表示图像完全不饱和,不允许使用负值
sepia(%) 将图像转换为棕褐色,默认值为 0%,表示原始图像;100% 表示图像完全变成棕褐色,不允许使用负值
url() url() 函数用来指定一个 XML 文件,文件中设置了一个 SVG 滤镜,并且可以包含一个锚点来指定具体的滤镜元素
initial 将属性设置为其默认值
inherit 从父元素继承此属性的值

提示:这些 CSS 函数的参数值基本上都在 0~1(0%~100%)之间,但也有几个例外,比如 blur() 函数的参数值以像素为单位,而 hue-rotate() 函数的参数值则是以“deg”为单位。

【示例】下面通过一个示例来演示 CSS 中滤镜的使用:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 200px;
  7. height: 200px;
  8. float: left;
  9. position: relative;
  10. }
  11. div span {
  12. position: absolute;
  13. top: 50%;
  14. left: 50%;
  15. transform: translate(-50%, -50%);
  16. color: white;
  17. text-shadow: 1px 1px 2px black;
  18. }
  19. img {
  20. width: 100%;
  21. }
  22. div img.blur {
  23. filter: blur(4px);
  24. }
  25. div img.brightness {
  26. filter: brightness(250%);
  27. }
  28. div img.contrast {
  29. filter: contrast(180%);
  30. }
  31. div img.grayscale {
  32. filter: grayscale(100%);
  33. }
  34. div img.huerotate {
  35. filter: hue-rotate(180deg);
  36. }
  37. div img.invert {
  38. filter: invert(100%);
  39. }
  40. div img.opacity {
  41. filter: opacity(50%);
  42. }
  43. div img.saturate {
  44. filter: saturate(7);
  45. }
  46. div img.sepia {
  47. filter: sepia(100%);
  48. }
  49. div img.shadow {
  50. filter: drop-shadow(8px 8px 10px green);
  51. }
  52. </style>
  53. </head>
  54. <body>
  55. <div><img src=“./tulip.jpg” alt=“tulip”> <span>原始图像</span></div>
  56. <div><img class=“blur” src=“./tulip.jpg” alt=“tulip”> <span>blur(4px)</span></div>
  57. <div><img class=“brightness” src=“./tulip.jpg” alt=“tulip”><span>brightness(250%)</span></div>
  58. <div><img class=“contrast” src=“./tulip.jpg” alt=“tulip”> <span>contrast(180%)</span></div>
  59. <div><img class=“grayscale” src=“./tulip.jpg” alt=“tulip”> <span>grayscale(100%)</span></div>
  60. <div><img class=“huerotate” src=“./tulip.jpg” alt=“tulip”> <span>hue-rotate(180deg)</span></div>
  61. <div><img class=“invert” src=“./tulip.jpg” alt=“tulip”> <span>invert(100%)</span></div>
  62. <div><img class=“opacity” src=“./tulip.jpg” alt=“tulip”> <span>opacity(50%)</span></div>
  63. <div><img class=“saturate” src=“./tulip.jpg” alt=“tulip”> <span>saturate(7)</span></div>
  64. <div><img class=“sepia” src=“./tulip.jpg” alt=“tulip”> <span>sepia(100%)</span></div>
  65. <div><img class=“shadow” src=“./tulip.jpg” alt=“tulip”> <span>drop-shadow(8px 8px 10px green)</span></div>
  66. </body>
  67. </html>

运行结果如下图所示:

1452195N9-0
图:filter 属性演示

另外,您也可以为同一个元素使用多个滤镜效果,只需要将每个滤镜函数使用空格分隔,示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. width: 300px;
  7. height: 300px;
  8. position: relative;
  9. }
  10. div span {
  11. position: absolute;
  12. top: 50%;
  13. left: 50%;
  14. transform: translate(-50%, -50%);
  15. color: white;
  16. text-shadow: 1px 1px 2px black;
  17. }
  18. img {
  19. width: 100%;
  20. filter: sepia(90%) saturate(400%) brightness(150%);
  21. }
  22. </style>
  23. </head>
  24. <body>
  25. <div><img src=“./tulip.jpg” alt=“tulip”><span>sepia(90%) saturate(400%) brightness(150%)</span></div>
  26. </body>
  27. </html>

运行结果如下图所示:

1452196114-1
图:滤镜的组合使用

注意:在组合使用多个滤镜效果时,要特别注意使用的顺序,否则会产生意料之外的效果,例如在使用 grayscale() 之后再使用 sepia() 将产生一个完整的灰度图片。

不仅仅是图像,任何 HTML 元素都可以使用滤镜效果,例如文本、视频等都可以使用滤镜来美化,示例代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. div {
  6. filter: blur(2px) contrast(50%) brightness(80%);
  7. }
  8. </style>
  9. </head>
  10. <body>
  11. <div>说起滤镜可能大家首先想到的就是 PhotoShop 之类的制图软件,通过此类软件的滤镜可以对图片进行美化。而在 CSS 中,我们无需借助任何软件也可以实现很多种滤镜效果,例如模糊效果、透明效果、色彩反差调整、色彩反相等等。另外,通过 CSS 中的滤镜还能对网页中的元素或者视频进行处理。</div>
  12. </body>
  13. </html>

运行结果如下图所示:

1452192229-2
图:为页面中的其它元素设置滤镜效果
© 版权声明
THE END
喜欢就支持一下吧
点赞11 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片