【CSS3】如何使网站变灰的方法大全

1、支持IE

html {  FILTER: gray }
或
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }

说明:此方法支持IE,不支持Firefox和Chrome等非IE内核浏览器。

2、同时支持IE和Chrome(推荐)

html {overflow-y:scroll;filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}

说明:此方法支持IE浏览器、360、Safari和Chrome等浏览器,但是不支持Firefox浏览器。

3. 使用gray_baiwanzhan.js插件

使用gray_baiwanzhan.js插件。这个插件是模拟IE的filter:progid方法。

使用方法:

gray_baiwanzhan.js插件源文件:http://cn.baiwanzhan.com/js/gray_baiwanzhan.js

window.onload=function(){ 
	grayscale(document.body); 
}

说明:支持IE、360、Safari、Chrome、Opera和Firefox等浏览器。

问题:这个在IE下也挺占资源的。


有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议,请将网页最头部的<html>替换为以下代码:

<!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”/>


以上代码总结至网络,若没有效果不妨多尝试几种方法

赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏