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')" />
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