网站地图    梁伟介绍    标签云    登陆注册
首页 > 网站建设 > 网站变灰代码(兼容火狐、IE、Safari4、Opera 9、chrome )
20134月21

网站变灰代码(兼容火狐、IE、Safari4、Opera 9、chrome )

分类:网站建设 | 标签: | 浏览:1,370次 5 Comments 发表评论

哀悼日,网站变灰代码。本来我在我的http://www.liangwei.cc/blog_logs/wei_ya_an_jiayou_liang_wei_bo_ke_wang_zhan_zheng_ti_bian_hui_dao_nian_yu_nan_tong_bao.html 这个篇文章中写了实现的代码,可是有人说火狐下不变灰,然后我就把所有的方法都总结的发一下。

一.wordpress 只要在你的css头部加下面这段代码就可以了。

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

二.其它网站参考下面的方法。

1.只要是符合w3标准的网页,在CSS文件的最前面加上一行代码就可以了,这段代码使用的是CSS滤镜,将网页中的色彩部分过滤掉。

html { filter:progid:DXImageTranorm.Microsoft.BasicImage(grayscale=1); }

上面这段代码不换行直接复制,粘贴到你的css中就可以。

2.在你的网站页面上
<head></head>
之间加上下面这段代码:
<style type=”text/css”>
body {filter:gray}
</style>

3.在你的网站页面上
<head></head>
之间加上下面这段代码:
<style>
html{filter:progid:DXImageTranorm.Microsoft.BasicImage(grayscale=1);}
</style>

4.找到你的网站CSS文件,把下面的代码放到网站的css文件头部中(此为教育网采用的方法)
body{
filter:gray;
}

说明:1.有一些站长的网站可能使用这个css 不能生效,是因为网站没有使用最新的网页标准协议

<!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“>

请将网页最头部的<html>替换为以上代码。然后在添加上面的代码。

2.有一些网站FLASH动画的颜色不能被CSS滤镜控制,可以在FLASH代码的<object …>和</object>之间插入:

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

三、火狐浏览器实现方法

以上所有的方法只针对ie跟chrome,下面就把针对火狐的方法介绍一下,此方法兼容所有的浏览器,也就是说只要你使用了下面的这个方法,你就可以免去上面所有的方法,不过此方法 会造成你的网站速度下降。

这个方法使用js调用来实现。下载grayscale.js 这个文件,这个文件百度一下就可以,为了方便我上传到了百度网盘供大家下载。

点击下载grayscale.js

然后在你的网站头部加入下面的调用代码就可以了。

<script src="grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
window.onload=function(){  //网页变灰
grayscale(document.body); 
}
</script>
文章作者:梁伟
本文地址:http://www.liangwei.cc/website_tech/wang_zhan_bian_hui_dai_ma.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

有5 条评论 to “网站变灰代码(兼容火狐、IE、Safari4、Opera 9、chrome )”

  1. #1 IP网络技术吧 回复 | 引用 评论时间 : 2013-04-22 13:36

    祝福雅安人民!

  2. #2 35秒杀网 回复 | 引用 评论时间 : 2013-05-01 12:21

    博文有更新了吗?好久没来过咯

  3. #3 莫小雅博客 回复 | 引用 评论时间 : 2013-05-02 16:49

    留个脚印!

  4. #4 35秒杀网 回复 | 引用 评论时间 : 2013-05-04 12:31

    不止一次的来过,有价值的博客,收藏先~

    • #5 梁伟 回复 | 引用 评论时间 : 2013-05-04 12:48

      谢谢支持

发表评论