如何将网页变成黑白色或灰色

码农公社  210.net.cn   210= 1024  10月24日一个重要的节日--码农(程序员)节


将整个网页变色,无非三种途径:css直接设置变色、添加svg滤镜变色、js遍历所有标签变色。


1、css编辑样式

在需要应用的地方设置class=


.gray { 
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}


2、svg


先编写svg文件


<svg version="1.1" 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>


css调用

filter: url(gray.svg#grayscale);


3、js遍历  

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script>

js源不太好,会导致网页加载过慢,可手动下载到本地grayscale.js

(打开后按F12键,切到Network标签,刷新网页会出现一个文件,右键save as 保存本地)  

然后用js或者jq调用


/*js调用*/
 grayscale(document.getElementById("thisImage")); 
/*jq调用*/ 
 grayscale($("#thisImage"));


评论