让网页�?��?�浅�?（CSS+Javascript）

laoshu133 HTML/CSS 1评论 Apr 26

事出自然有因，本文也是如此，雅安，加油�?

相信最近�?少站长和技术在度娘谷歌“CSS 网页 �?�色�?

本�?�觉得这类的介�?网上已�?很多了，�?想�?�?�一脚了，�?过今天忽然有朋�?��?��?�我问起，自以为自己很了解的情况下给了几个方案：

堪称完美级
整站�?�图片，�?过就是工作�?�?大，还得�?�回�?�，�?是有会员上传的图就更麻烦了（明显调侃）
纯CSS实现

IE：filter

Chrome：filter

效果很�?错，实现也简�?�，�?过 FF, OPERA,SAFARI �?支�?，手机端就更�?行了
HTML5 filereader实现去色功能

效果良好，而且有�?错类库实现了

代�?�?�?大，�?过低版本�?览器全挂掉
结�?��?�?�两点

filter - 略

grayscale.js -

缺点：

如果页�?�图片�?很大，图片加载时间很很长，页�?��?�能会出现闪�?

然�?�，JS本�?�效率就�??低，所以处�?�大�?图片，自然页�?�会�?�

然�?�在自己�?得�?的时候，朋�?��?�过�?�一段（说是�?�事给的）：


html{ 
    filter: url("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:gray;
    -webkit-filter: grayscale(100%);
}

�?一看，虽然让我想起了还有SVG这么个东西�?�以使，�?过估计也就IE和Chrome行�?�，�?�象中真没记得FF有支�?filter，然�?�打开FF测试了下，还真�?�以。

然�?�自己也动手去谷歌了下，�?想上�?�的代�?出处应该是在这里：

�?��?��?��?�现在stackoverflow上也有讨论：

然�?��?�找了些资料，总结方案如下：


html{
	/*
	* SVG，�?建议�?�独SVG文件
	* 会增加一次请求，如果支�?SVG基本data:基本也就没压力了，如下 
	* SVG文件：/test/grayscale.svg
	*/
	/* filter: url(grayscale.svg#grayscale); */ 
	/* 
	* 有哥们研究说SVG的支�?情况如下：
	* http://www.fettblog.eu/blog/2012/06/11/forcing-chrome-to-print-all-pages-in-grayscale/
	* SVG version for IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 -- does not, need to be prefixed. See below
	* �?过我测试了下IE10(WIN7&WIN8)都�?支�?，所以基本兼容情况如下：
	* Chorme 25/26�?支�?，手上没有更低版本的Chorme测试
	* FF3.5+ 
	*/
	filter:url(svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale);
	/* Webkit only, Chrome & Safari 6+ */
	-webkit-filter:grayscale(100%);
	/* future-proof */
	filter:grayscale(100%);
	/* IE4-8 and 9 (deprecated). */
	filter:gray;
}

html{ 	/* 	* SVG，�?建议�?�独SVG文件 	* 会增加一次请求，如果支�?SVG基本data:基本也就没压力了，如下 	* SVG文件：/test/grayscale.svg 	*/ 	/* filter: url(grayscale.svg#grayscale); */ 	/* 	* 有哥们研究说SVG的支�?情况如下： 	* http://www.fettblog.eu/blog/2012/06/11/forcing-chrome-to-print-all-pages-in-grayscale/ 	* SVG version for IE10, Chrome 17, FF3.5, Safari 5.2 and Opera 11.6 -- does not, need to be prefixed. See below 	* �?过我测试了下IE10(WIN7&WIN8)都�?支�?，所以基本兼容情况如下： 	* Chorme 25/26�?支�?，手上没有更低版本的Chorme测试 	* FF3.5+ 	*/ 	filter:url(svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImdyYXlzY2FsZSI+PGZlQ29sb3JNYXRyaXggdHlwZT0ibWF0cml4IiB2YWx1ZXM9IjAuMzMzMyAwLjMzMzMgMC4zMzMzIDAgMCAwLjMzMzMgMC4zMzMzIDAuMzMzMyAwIDAgMC4zMzMzIDAuMzMzMyAwLjMzMzMgMCAwIDAgMCAwIDEgMCIvPjwvZmlsdGVyPjwvc3ZnPg==#grayscale); 	/* Webkit only, Chrome & Safari 6+ */ 	-webkit-filter:grayscale(100%); 	/* future-proof */ 	filter:grayscale(100%); 	/* IE4-8 and 9 (deprecated). */ 	filter:gray; }

从上�?�注释基本�?�以看出对于IE10和低版本Opera CSS处�?�基本就是没折了；

以上代�?使用时属性顺�?�?能调�?�；

以上选择器建议html或作用于html上，�?�则在IE下�?�能会看到部分元素�?旧彩色，当然IE9无论怎样都处�?�的�?是很好

说了这么多，我们�?�实践下：

�?�张美女看效果：

3D Girl

到了这里，在找资料的过程还�?�现一个Future-filter的测试页，�?�以看看未�?�的filter，下�?�还有�?Filtered Video“ ^O^

OK，上�?�说的都是CSS解决方案，我�?�?�还说了有JS的解决方案；主�?说下grayscale.js的，如果自己去写原生JS解决，看�?��?�以自己动手试试

项目地�?�：

首先，grayscale.js�?是兼容所有�?览器，看其主页的标题：《“Grayscaling�? in non-IE browsers》，解决方案并�?适应于IE，至少是低版本的IE

然�?�DEMO效果在此：

最�?��?�grayscale.js的用法：


var el = document.getElementById( 'myEl' );
grayscale( el );
 
// Alternatively, pass a DOM collection
// (all elements will get "grayscaled")
grayscale( document.getElementsByTagName('div') );
 
//�?�作用于jQuery
// Even works with jQuery collections:
grayscale( $('div') );
//To reset an element (back to its original colourful state) you must call grayscale.reset() and pass whatever elements you want reset:
grayscale.reset( el );
// reset() also accepts DOM/jQuery collections
grayscale.reset( $('div') );

//预处�?�，主�?用于大图片
//The ‘prepare’ function, as discussed earlier, should be called when there’s a large image to process or even if there are several smaller images. Be aware that larger images will take quite a while to process (just a 300×300 PNG takes about 3 seconds in ‘prepare’ mode).
grayscale.prepare( document.getElementById('myEl') );
// Also accepts DOM/jQuery collections
grayscale.prepare( $('.gall_img') );

var el = document.getElementById( 'myEl' ); grayscale( el ); // Alternatively, pass a DOM collection // (all elements will get "grayscaled") grayscale( document.getElementsByTagName('div') ); //�?�作用于jQuery // Even works with jQuery collections: grayscale( $('div') ); //To reset an element (back to its original colourful state) you must call grayscale.reset() and pass whatever elements you want reset: grayscale.reset( el ); // reset() also accepts DOM/jQuery collections grayscale.reset( $('div') ); //预处�?�，主�?用于大图片 //The ‘prepare’ function, as discussed earlier, should be called when there’s a large image to process or even if there are several smaller images. Be aware that larger images will take quite a while to process (just a 300×300 PNG takes about 3 seconds in ‘prepare’ mode). grayscale.prepare( document.getElementById('myEl') ); // Also accepts DOM/jQuery collections grayscale.prepare( $('.gall_img') );

�?�演示一下：


grayscale(document.body);

�?�张美女看效果：

3D Girl

�?�考：

Tags:CSS Javascript �?端

上一��：Chrome更改parseInt默认转�?�规则

下一篇：javascript�?�?算转整型存在风险

共1评论

�?宇轩说：

于 2013-5-18 12:32:58 #

欢迎回访，�?�看你了

回�?

_米空格

让网页�?��?�浅�?（CSS+Javascript）

相关文章

共1评论

�?�表评论

最新评论�?�回�?

最近�?�表

网站分类

文章归档

�?�情链接