CSS学习笔记之滤镜

• 纪念512，可以使网页变黑白，可设置如下代码：
  body
  {
     filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  }
  
• 对img图片渐变色通过用JavaScript来控制：

　　　　我们在浏览时会出现这样的一个效果：网页上有一个几乎透明的图像，当鼠标移到图像上时，图像慢慢变清晰；当鼠标移开时，图像又恢复到原来的透明状态。要实现这个功能，需要使用到CSS的alpha滤镜，并用javascript来控制alpha滤镜的Opacity值，首先在网页中插入一个图片，并设定alpha滤镜的opacity值，让图片透明，然后给图片加入onMouseOver和onMouseOut动作。

function CssFilter(n)
{
  if(n=="add") //如果传入的参数为add，则将图片的不透明度增大
  if(img.filters.alpha.Opacity < 100)
  {
     img.filters.alpha.Opacity += 5;
     setTimeout("CssFilter('add')",20);
  }
  if(n=="dec") //如果传入的参数为dec，则将图片的不透明度降低
  if(img.filters.alpha.Opacity > 20)
  {
     img.filters.alpha.Opacity -= 5;
     setTimeout("CssFilter('dec')",20);
  }
}

 

<img src="这里是图片路径" id="img" style="filter:alpha(Opacity=20)" 
     onMouseOver="CssFilter('add')" onMouseOut="CssFilter('dec')" />

转自:http://www.cnblogs.com/meiqunfeng/archive/2009/05/13/1456175.html