前端开发

 首页 > 前端开发 > css教程 > css+js整站变灰(兼容IE7+) - html/css语言栏目:h

css+js整站变灰(兼容IE7+) - html/css语言栏目:h

分享到:
【字体:
导读:
          历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的?重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么...

历年大型地震等自然灾害来临过后,各大网站整站都变成灰色以悼念逝去的生命,那么这种整站变灰的效果是怎么做到的?
 
重写一套css?NO,即便你有这个时间重写,那网站内的图片怎么办?难道重做一遍?很明显工作量巨大不符合实际。
 
火狐和chrome浏览器比较简单,直接用css3搞定:
 
 

周星星

 
对于IE7-IE9浏览器,可以使用IE自带的滤镜,在页面头部内加入样式:
 
body{ filter:gray; }/*IE7-IE9,必须加在body元素上*/
前后效果对比:
 
 
 
效果杠杠的,可是切换到IE10或IE11就傻了,IE10/11需要用grayscale.js来解决:
 
刷新页面,效果和IE7-IE9下一致了,可是现在切换回IE7、IE8、IE9,又傻眼了,css不起作用了,页面在IE7-9下依然是彩色的!so,我们需要判断IE浏览器版本分别用css、js的方式处理,IE7-9下用css自带的滤镜,IE10-11用grayscale.js处理,那么全兼容的写法是:
 
 

周星星

分享到:
django中如何生成非HTML格式的内容。 - h...
某些时候可能有这样的需求,在网页中点击一个链接或者一个按钮希望返回一张图片、一个pdf文档、一个csv文档等而非HTML。在diango中很容易做到这些。django中的view用来接收http request并返回web response。通常情况下,返回的内容为HTML,但其能够返回的不仅仅如此,还可以是上述图片、pdf文件等等。返回非HTML形式的内容...
CSS3动画-抛物线 - html/css语言栏目:ht...
CSS3动画之抛物线 今天来说下CSS3动画,目标是让一个方块做抛物线运动。主要用到的CSS3属性有animation,transform,@keyframes,transition等。 Animation版-0 我们先建立一个HTML文件,test.html:   因为animation属性可以通过@keyframes 规则创建动画,那么如果我们要做抛物线,可以尝试简单定义几个阶段的位置。 ...
  •         php迷,一个php技术的分享社区,专属您自己的技术摘抄本、收藏夹。
  • 在这里……