`
rockyuse
  • 浏览: 195383 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

网站变灰

 
阅读更多
js自己去找
 
<script src="grayscale.js" type="text/javascript"></script>
<script type="text/javascript">
var browserName = navigator.userAgent.toLowerCase();
var mybrowser = {
version: (browserName.match(/.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/) || [0, '0'])[1],
safari: /webkit/i.test(browserName) && !this.chrome,
opera: /opera/i.test(browserName),
firefox:/firefox/i.test(browserName),
ie: /msie/i.test(browserName) && !/opera/.test(browserName),
mozilla: /mozilla/i.test(browserName) && !/(compatible|webkit)/.test(browserName) && !this.chrome,
chrome: /chrome/i.test(browserName) && /webkit/i.test(browserName) && /mozilla/i.test(browserName)
}
 
if(mybrowser.mozilla || mybrowser.safari || mybrowser.opera){
window.onload=function(){ 
grayscale(document.body); 
}
}
</script type="text/css">
<style>
html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
}
</style>

 

另外一种不用js的,兼容firefox的

html{
filter: grayscale(100%);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(1);
} 

 

分享到:
评论

相关推荐

    网站变灰代码 网站变灰代码

    网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码网站变灰代码

    使整个网站变灰色代码

    ### 使整个网站变灰色代码 #### 背景与意义 在特定的哀悼活动中,将网站的颜色调整为灰色是一种表示哀悼和尊重的方式。例如,在2010年4月21日,为了纪念玉树地震中的遇难者,许多网站采取了这种措施来表达对逝者的...

    网站变灰色代码方法大集合

    以上介绍了几种常用的使网站变灰的方法,包括使用HTML filter属性、修改全局CSS样式表以及针对特定元素应用CSS样式等。每种方法都有其适用场景和优缺点,开发者可以根据实际情况选择最合适的技术方案。需要注意的是...

    网站变灰色兼容代码 包括图片 支持所有浏览器

    网站变灰色是一种常见的致敬或哀悼方式,例如在重大灾难事件发生后,许多网站会选择将页面变为灰色以表达哀思。实现这一效果的关键在于CSS滤镜(filters),它允许我们对网页元素应用视觉效果,如灰度、模糊、饱和度...

    Discuz! 灰色个性

    Discuz! 灰色个性

    jquery网页变灰

    "jQuery 网页变灰"是一个常见的需求,它可以通过JavaScript库jQuery实现。本教程将深入讲解如何利用jQuery实现这一功能,并提供实例及源码供参考。 首先,理解jQuery的基本概念是必要的。jQuery是一个轻量级、高...

    整站变灰hui.rar

    "整站变灰"通常是一种网站悼念或纪念活动的表现方式,通过调整网站色彩主题,将网站变为灰色,以此表达哀思或致敬的情感。在这个名为"整站变灰hui.rar"的压缩包中,包含了一个名为"整站变灰hui.js"的JavaScript文件...

    哀悼日变灰操作

    在IT行业,尤其是前端开发领域,“哀悼日变灰操作”通常指的是在特定的纪念日或哀悼日期间,网站或应用将界面颜色调整为灰色调,以此表达对逝者的哀思或对某个事件的纪念。这种操作不仅是一种文化礼仪的表现,也是...

    使整个页面变灰 样式代码

    ### 页面变灰样式代码知识点详解 #### 一、概述 在网页设计与开发过程中,有时候我们需要将整个网页变成灰度模式,例如在纪念日或哀悼活动中,网站可能会选择将色彩丰富的图片转换成黑白灰度效果,以此表达敬意或...

    网站变黑白灰色的4种代码详细讲解

    2008.5.12四川汶川大地震,带走了很多生命,令人... 相关文章:网站变黑白色CSS一行代码实现 。  为了方便个人站长表示哀悼,现总结CSS实用滤镜代码,做些微的调整,即可将网站转换为“黑、白、灰”风格。 方法一: ...

    Desktop.zip

    综上,"Desktop.zip"提供了在多浏览器环境下实现网站自动变灰的完整方案,展示了HTML、CSS和JavaScript的结合应用,以及对于浏览器兼容性的考虑。开发者可以学习和借鉴这个案例,以便在自己的项目中实现类似的功能。

    网站指定日期变灰色JS代码附带教程

    网站指定日期变灰色的JS代码是一种常见的网页设计技术,它通常用于表示哀悼、纪念特殊事件或节假日。这种效果可以通过JavaScript脚本实现,使整个网页背景变为灰色,以传达特定的情感氛围。以下将详细介绍如何使用JS...

    整个网站变成灰色的效果是怎样实现的?

    2020年的开始,是一个历史性的痛,我们的国家经历了非常惨痛的...有些时候我们需要把网站页面变成黑白色或灰色,特别是对于一些需要悼念的日子,以及一些影响力很大的伟人逝世或纪念日的时候,都会让网站的全部网页变成

    sitegray_demo2.rar

    在IT行业中,有时候我们需要对网站进行特殊的视觉效果处理,例如在悼念活动或者特定纪念日时,让网站呈现灰色调,这种技术被称为“网站变灰”。在这个“sitegray_demo2.rar”压缩包中,提供了一个针对IE10和IE11...

    JQuery弹出框,背景变灰色

    在网页设计中,jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果等任务...这不仅可以提升用户体验,还能增加网站的专业感。记得在实际项目中,根据需求调整样式和功能,以适应不同场景。

    网站整体变成黑白色的方法

    网站变灰或变黑白是一种表示哀悼或纪念的特殊设计,常见于纪念重大事件或人物。这种方法通过调整网页的颜色方案,将原本彩色的界面转换成黑白色调,以表达庄重和肃穆的氛围。在描述中提到的,可以通过添加特定的CSS...

    弹出对话框并屏幕变灰

    弹出对话框并屏幕变灰

    _sitegray.rar

    “网站变灰”这一概念通常涉及到图像处理和CSS。在CSS3中,可以通过`filter`属性应用各种视觉效果,包括`grayscale()`函数,它可以使元素变为灰度。例如,我们可以在元素上设置`filter: grayscale(100%)`来实现完全...

    网站整体灰色调(兼容firefox等非IE浏览器)

    在本主题中,我们重点关注的是"网站整体灰色调"的设计策略,以及如何确保这种设计在各种浏览器,特别是非IE浏览器如Firefox上实现良好的兼容性。 首先,灰色调的网站设计通常被称为“中性色”设计,它以灰色为主调...

    灰色渐变暗沉英文网站模板_灰色 渐变 暗沉 英文 简洁清爽 外贸 整站 黄色 炫彩.zip

    在IT行业中,网页设计是至关重要的一个领域,它关乎到用户体验、品牌形象以及网站的转化率。这个名为"灰色渐变暗沉英文网站模板_灰色 渐变 暗沉 英文 简洁清爽 外贸 整站 黄色 炫彩.zip"的压缩包文件提供了一个特别...

Global site tag (gtag.js) - Google Analytics