让网页??浅?(CSS+Javascript) - 凡事预则立,?预则废

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

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

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

  1. 堪称完美级

    整站?图片,?过就是工作??大,还得?回?,?是有会员上传的图就更麻烦了(明显调侃)

  2. 纯CSS实现

    IE:filter

    Chrome:filter

    效果很?错,实现也简?,?过 FF, OPERA,SAFARI ?支?, 手机端就更?行了

  3. HTML5 filereader实现去色功能

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

    代???大,?过低版本?览器全挂掉

  4. 结???两点

    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;
}

从上?注释基本?以看出对于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') );

?演示一下:


grayscale(document.body);




?张美女看效果:

3D Girl


 


?考:

1评论

  1. 欢迎回访,?看你了

    回?

?表评论

最新评论?回?

    loading

最近?表

    loading

网站分类

    loading

文章归档

    loading

?情链接

Top Comments Footer