`

兼容firefox,chrome的网页灰度效果

阅读更多

要实现网页灰度,最稳妥的办法莫过于直接处理所有图像,不用考虑兼容,不用考虑效率。但是,工作量比较大,切换回来也费力。 

ie系列支持css滤镜,一句 filter:gray; 就解决了所有问题。但是,众所周知,ie以效率低著名,你会发现开启以后速度显著下降。并且,最致命的,在其他浏览器下无效。 

有没有兼容所有浏览器的办法呢?有。JavaScript能做到,早就有人用js模拟了ie的gray滤镜,如果你感兴趣并且愿意看英文,可以去看看《“GRAYSCALING” IN NON-IE BROWSERS》。如果你不愿意看,我可以直接告诉你怎么用。 

1. 下载grayscale.js文件 

2. 在你的header里引用这个js文件 

<script type="text/javascript" src="../include/jscript/grayscale.js"></script> 

3. 要实现全站灰度,在onload事件中调用 

grayscale(document.body); 

我的主题背景图片比较多,处理起来较吃力,可能出现部分图片消失的情况。。。 

我会把这个效果开启三天,如果因为处理问题导致主题显示不正常影响了大家的浏览效果还请见谅。反正来这儿的都是熟人,要影响也就你们几个。。。

分享到:
评论

相关推荐

    css页面变灰度兼容ie、firefox、chrome、opera、safari实现样式

    在网页设计中,有时我们需要将整个页面或者特定元素呈现为灰度效果,以达到某种视觉效果或用户体验。本文主要探讨如何使用CSS实现这一功能,并确保兼容性覆盖到主流浏览器,包括IE、Firefox、Chrome、Opera以及...

    15种CSS3图片Hover悬停效果代码,超级实用,兼容IE9+、chrome、firefox浏览器.rar

    在本文中,我们将深入探讨如何使用CSS3来创建15种不同的图片悬停效果,这些效果不仅实用,而且兼容主流的现代浏览器,如IE9、Chrome和Firefox。这些技巧可以帮助开发者提升网站的交互性和用户体验。 首先,让我们...

    使网页变灰,支持IE、FireFox、Opera、360浏览器等

    标题 "使网页变灰,支持IE、FireFox、Opera、360浏览器等" 提到的是一个关于实现网页变灰效果的技术,这个效果通常在网站上用于表示哀悼或者纪念活动,将整个页面调成灰色。这个技术涉及到浏览器兼容性和JavaScript...

    把网页变成黑白(兼容谷歌、火狐、ie等浏览器)

    2. `-moz-filter` 是为了兼容旧版的Firefox浏览器。 3. `-ms-filter` 是针对早期的IE浏览器。 4. `-o-filter` 是针对旧版的Opera浏览器。 此外,还包含一个不带前缀的filter属性,这是标准的语法,为了确保现代...

    网页变黑白色,兼容IE10、IE11

    /* 对旧版Firefox的支持 */ -ms-filter: grayscale(100%); /* 对旧版IE的支持 */ filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); /* 对IE10、IE11的支持 */ transition: all 0.5s ease; /...

    使整个网站变灰色代码

    对于现代浏览器(如Chrome、Firefox等),`filter`属性的语法略有不同,可以使用CSS3的`grayscale()`函数实现相同的效果,例如: ```css html { filter: grayscale(100%); } ``` 需要注意的是,并非所有的页面...

    网页变成灰色的方法

    - **浏览器支持**:`filter`属性得到了大多数现代浏览器的支持,包括Chrome、Firefox、Safari等。然而,对于较旧版本的浏览器(如Internet Explorer),该属性可能不受支持或表现不一致。 - **性能影响**:使用`...

    grayscale.js.zip

    事实上,这个库的设计目标是跨浏览器兼容,所以它也能在Firefox、Chrome、Safari等现代浏览器中正常工作,这使得它成为一个非常实用的工具,尤其对于那些需要确保老版本浏览器用户体验的项目。 总的来说,grayscale...

    web网站置灰 哀悼 支持多firfox

    在提供的文件"grayscale11.js"中,我们可以推断这是一个JavaScript脚本,可能包含了实现网页灰度效果的代码。JavaScript可以用于监听特定事件(如页面加载或用户触发的事件),然后动态地将页面元素的颜色转换为灰色...

    用这个语句可使网页为黑白

    大多数现代浏览器(如Chrome、Firefox、Safari等)都支持`grayscale()`函数。 ### 知识点四:实现步骤 1. **添加样式到HTML文档**:为了在整个网页范围内应用黑白效果,可以在`&lt;head&gt;`标签内部添加`&lt;style&gt;`标签,...

    使整个页面变灰 样式代码

    在网页设计与开发过程中,有时候我们需要将整个网页变成灰度模式,例如在纪念日或哀悼活动中,网站可能会选择将色彩丰富的图片转换成黑白灰度效果,以此表达敬意或哀思。本文将详细介绍如何通过简单的CSS代码实现...

    CSS3滤镜及Canvas.pdf

    【CSS3滤镜】是CSS3中引入的一种增强网页视觉效果的技术,允许开发者对网页元素应用各种图像处理效果,如转换色彩、模糊、光照等。CSS3滤镜主要分为Webkit内核浏览器支持的CSS3 Filter和Firefox以及IE10以上的SVG...

    Desktop.zip

    - 这个解决方案考虑到了不同浏览器之间的兼容性问题,包括老版本的Internet Explorer(IE6-9)以及Firefox和Chrome。这通常需要利用条件注释、特性检测或者前缀(如-moz-,-webkit-)来确保在各个浏览器中都能正常...

    CSS代码使网页呈灰色

    现代浏览器如Chrome、Firefox、Safari等,推荐使用CSS3的`filter`属性,例如`filter: grayscale(100%)`,这样可以实现更好的跨浏览器兼容性。同时,CSS3的滤镜功能更强大,包括模糊、亮度、对比度等多种效果,可以...

    让网页图片变灰色将彩色图像变成灰度的三种方法

    在现代浏览器(如Firefox、Chrome、Safari)中,可以使用`-webkit-filter: grayscale(1);`来实现这一效果。对于较旧的IE6到9,可以使用`filter: gray;`。不过需要注意,Firefox当前不支持此方法。示例代码如下: ``...

    css3使网页、图片变成灰色兼容大多数浏览器

    不同的浏览器可能对CSS3的支持程度不一,所以需要使用 `-webkit-`, `-moz-`, `-ms-`, `-o-` 前缀来分别支持 Chrome/Safari,Firefox,Internet Explorer 和 Opera。同时,对于较旧版本的IE,我们需要使用`filter`...

    CSS滤镜在网页设计中的应用.rar

    大部分现代浏览器(如Chrome、Firefox、Safari和Edge)支持大部分滤镜函数,但在一些较旧或非主流浏览器中可能不完全支持。因此,在实际项目中使用CSS滤镜时,需要考虑兼容性问题,可以使用`-webkit-`、`-moz-`等...

Global site tag (gtag.js) - Google Analytics