遮罩滤镜

  1. <html>
  2. <head>
  3. <style>
  4. div
  5. {
  6. position:absolute;
  7. left:10px;
  8. top:100px;
  9. width:160px;
  10. height:120px;
  11. }
  12. </style>
  13. <script type="text/javascript">
  14. function getFilter()
  15. {
  16. document.getElementById('myDiv').style.filter="mask(color=#ffffff)"
  17. }
  18. function noFilter()
  19. {
  20. document.getElementById('myDiv').style.filter=false
  21. }
  22. </script>
  23. </head>
  24.  
  25. <body>
  26. <p>本例演示如何动态地插入遮罩滤镜。</p>
  27. <p>请把鼠标移动到图像上：</p>
  28. <div><img src="/i/eg_landscape.jpg" /></div>
  29. <div onmouseover="getFilter()" onmouseout="noFilter()" id="myDiv">
  30. <h1>Mouse over this image landscape</h1></div>
  31. </body>
  32. </html>