CSS滤镜（网页灰白、图片渐变色）

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

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

JavaScript代码部分

 

前台图片HTML部分：

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

 

//以下内容转载：

在这分享下吧：

CSS里加：html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

或者：html { FILTER: gray }

在网页里加也行，不过页面多了改动量太大，还是CSS方便

<style. type="text/css">
html {
    FILTER: gray
}
</style>

有的时候加上后可能不生效，是因为网站没有使用最新的网页标准协议

需要在页面里加上：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

网站的FLASH动画的颜色不能被CSS滤镜控制，需要在FLASH代码的<object…>和</object>之间加上：

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/> 

基本上大功告成…http://www.cnblogs.com/sun8134/archive/2010/04/21/1716794.html

 

 

posted @ 2009-05-13 19:16  梅子  阅读(5710)  评论(2)  编辑  收藏  举报