CSS3 图片滤镜效果

图片滤镜效果主要是用 filter 属性,它定义了元素的可视效果 blur 给图像设置高斯模糊。

图片滤镜

CSS filter 属性把视觉效果(如模糊和饱和度)添加到元素。

注意:Internet Explorer 或 Edge 12 不支持 filter 属性。

把所有图片的颜色更改为黑白(100% 灰色):

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. img {
  6. width: 33%;
  7. height: auto;
  8. float: left;
  9. max-width: 235px;
  10. }
  11. .blur {filter: blur(4px);}
  12. .brightness {filter: brightness(250%);}
  13. .contrast {filter: contrast(180%);}
  14. .grayscale {filter: grayscale(100%);}
  15. .huerotate {filter: hue-rotate(180deg);}
  16. .invert {filter: invert(100%);}
  17. .opacity {filter: opacity(50%);}
  18. .saturate {filter: saturate(7);}
  19. .sepia {filter: sepia(100%);}
  20. .shadow {filter: drop-shadow(8px 8px 10px green);}
  21. </style>
  22. </head>
  23. <body>
  24. <p><strong>注意:</strong> Internet Explorer 或 Edge 12 不支持 filter 属性。</p>
  25. <img src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  26. <img class="blur" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  27. <img class="brightness" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  28. <img class="contrast" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  29. <img class="grayscale" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  30. <img class="huerotate" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  31. <img class="invert" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  32. <img class="opacity" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  33. <img class="saturate" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  34. <img class="sepia" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  35. <img class="shadow" src="/images/pineapple.jpg" alt="Pineapple" width="300" height="300">
  36. </body>
  37. </html>

提示:请访问本站的 CSS 滤镜参考手册,了解有关 CSS 滤镜的更多信息。

分类导航