原文:css+js整站变灰(兼容IE7+)

历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的?

重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际。

火狐和chrome浏览器比较简单,直接用css3搞定:

<style type="text/css">
.demo{color: red;}
body {
filter: grayscale(100%);/*火狐*/
-webkit-filter:grayscale(100%);/*chrome*/
}
</style>
<h1 class="demo">周星星</h1>
<img src="zxx.jpg">

对于IE7-IE9浏览器,可以使用IE自带的滤镜,在页面头部内加入样式:

body{ filter:gray; }/*IE7-IE9,必须加在body元素上*/

前后效果对比:

效果杠杠的,可是切换到IE10或IE11就傻了,IE10/11需要用grayscale.js来解决:

<script type="text/javascript" src="grayscale.js"></script>
<script type="text/javascript">
grayscale(document.body);
</script>

刷新页面,效果和IE7-IE9下一致了,可是现在切换回IE7、IE8、IE9,又傻眼了,css不起作用了,页面在IE7-9下依然是彩色的!so,我们需要判断IE浏览器版本分别用css、js的方式处理,IE7-9下用css自带的滤镜,IE10-11用grayscale.js处理,那么全兼容的写法是:

<style type="text/css">
.demo{color: red;}
body{
filter: grayscale(100%);/*火狐*/
-webkit-filter:grayscale(100%);/*chrome*/
filter:gray; /*IE7-9*/
}
</style>
<h1 class="demo">周星星</h1>
<img src="zxx.jpg">
<script type="text/javascript" src="grayscale.js"></script>
<script type="text/javascript">
var navStr = navigator.userAgent.toLowerCase();
if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
grayscale(document.body);
}
</script>

对于跨域的图片变灰暂时还无解,有知道的同学请不腻赐教!

本文地址:http://www.cnblogs.com/wangmeijian/p/4324693.html转载请保留出处!

css+js整站变灰(兼容IE7+)的更多相关文章

  1. 整站变灰CSS代码

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

  2. 网站整站变灰的方法(不支持IE10)

    html { -ms-filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); - ...

  3. css gray,grayscale,css变灰兼容大部分浏览器

    css gray,grayscale,css变灰兼容大部分浏览器 html { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'ht ...

  4. 简单的一段css代码让全站变灰,网站哀悼代码

    为表达全国各族人民对抗击新冠肺炎疫情斗争牺牲烈士和逝世通报的深切哀悼,国务院今天发布公告,决定2020年4月4日举行全国性哀悼活动.在此期间,全国和驻外使馆下半旗致哀,全国停止公共娱乐活动,4月4日1 ...

  5. CSS3或CSS+JS实现改变滚动条样式(兼容所有浏览器)

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 16px; /*滚动条宽度*/ height: 16px; /*滚动条高度*/ } ...

  6. 一句css代码让网站变灰

    <style> html{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grays ...

  7. div模块变灰

    整站变灰目前没发现什么特别好的办法,但是div(或者其他标签模块)模块变灰方法兼容性还不错. .gay_box{ filter: grayscale(100%); -webkit-filter: gr ...

  8. 浏览器兼容汇总(css+js)

      JavaScript 1. HTML对象获取问题 FireFox:document.getElementById("idName");ie:document.idname或者d ...

  9. css js 兼容问题

    js  兼容问题 1. document.form.item 问题问题:代码中存在 document.formName.item("itemName") 这样的语句,不能在FF下运 ...

随机推荐

  1. poj 1221 UNIMODAL PALINDROMIC DECOMPOSITIONS (母函数)

    /* 给出一个数n,把它拆分成若干个数的和,要求最大的数在中间并向两边非递增.问拆法有多少种. 母函数.枚举中间的那一个数.由于左右对称.所以仅仅须要求左边部分的方案就可以. 注意,左右两部分的取数必 ...

  2. hosts文件导致无法访问网站

    前段时间有人反映无论怎么样都无法在自己的电脑上访问法兰克官网,那台电脑的DNS也无法解析,通过查看hosts文件后发现,原来该电脑的hosts文件木马修改过了,屏蔽了相关的域名,删除新增的或者用其他机 ...

  3. Swift 的类、结构体、枚举等的构造过程Initialization(下)

    类的继承和构造过程 类里面的全部存储型属性--包含全部继承自父类的属性--都必须在构造过程中设置初始值. Swift 提供了两种类型的类构造器来确保全部类实例中存储型属性都能获得初始值,它们各自是指定 ...

  4. android插件技术-apkplug于OSGI服务基础-08

    我们提供 apkplug 下OSGI使用demo 源代码托管地址为 http://git.oschina.net/plug/OSGIService 一 OSGI与android Service 异同点 ...

  5. 聊聊高并发(二十九)解析java.util.concurrent各个组件(十一) 再看看ReentrantReadWriteLock可重入读-写锁

    上一篇聊聊高并发(二十八)解析java.util.concurrent各个组件(十) 理解ReentrantReadWriteLock可重入读-写锁 讲了可重入读写锁的基本情况和基本的方法,显示了怎样 ...

  6. JavaScript三在弹出的对话框中

    据悉js小伙伴会发现,我们在某些情况下使用的alert()办法.prompt()办法.prompt()办法.它们在屏幕上的对话框.容,使用这样的方法使得页面的交互性更精彩.实际上我们常常会在进行网页浏 ...

  7. c语言结构体使用方法

      结构(struct)      结构是由基本数据类型构成的.并用一个标识符来命名的各种变量的组合.  结构中能够使用不同的数据类型.      1. 结构说明和结构变量定义      在Turbo ...

  8. JavaScript 内存

    JavaScript 中对内存的一些了解 在使用JavaScript进行开发的过程中,了解JavaScript内存机制有助于开发人员能够清晰的认识到自己写的代码在执行的过程中发生过什么,也能够提高项目 ...

  9. Codeforces 432 D. Prefixes and Suffixes

    用扩展KMP做简单省力..... D. Prefixes and Suffixes time limit per test 1 second memory limit per test 256 meg ...

  10. OCP-1Z0-051-名称解析-文章7称号

    7. Which two  statements are true regarding the USING and ON clauses in table joins? (Choose two.) A ...