图像滤镜

  1. <html>
  2. <head>
  3. <style>
  4. div
  5. {
  6. width:160px;
  7. height:120px;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12.  
  13. Alpha: 
  14. <div style="filter:alpha(Opacity=20)">
  15. <img src="/i/eg_landscape.jpg" width="160" height="120" />
  16. </div>
  17.  
  18. Gray: 
  19. <div style="filter:gray()">
  20. <img src="/i/eg_landscape.jpg" width="160" height="120" />
  21. </div>
  22.  
  23. Invert: 
  24. <div style="filter:invert()">
  25. <img src="/i/eg_landscape.jpg" width="160" height="120" />
  26. </div>
  27.  
  28. Xray: 
  29. <div style="filter:xray()">
  30. <img src="/i/eg_landscape.jpg" width="160" height="120" />
  31. </div>
  32.  
  33. Mask: 
  34. <div style="position:absolute;left:10;top:610;">
  35. <img src="/i/eg_landscape.jpg" width="160" height="120" />
  36. </div>
  37.  
  38. <div style="position: absolute; left: 10; top: 610; filter: mask(color=#ffffff); width: 160; height: 120">
  39. <h2>The mask value makes the text transparent</h2>
  40. </div>
  41.  
  42. </body>
  43. </html>