网站风格变黑白的方法,用css或javascript方法将网站改为灰色
如何把网站颜色去掉?用下面的方法即可
1.通用方法
body { -webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: gray;
}html {-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);filter: grayscale(100%);filter: gray;
}
其中百分比根据自己实际情况进行调整。
如果要部分元素显示原色,则只能分开渲染了。
img#header_logo{position:absolute;top:78px;width:100px;filter: none !important;-webkit-filter: none !important;-moz-filter: none !important;-ms-filter: none !important;-o-filter: none !important;
}#top,#header,#navigation,#subnavigation,#main,#linkage,#footer{filter: grayscale(100%);-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: url(desaturate.svg#grayscale);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(1);
}
注意<img id="header_logo" />
尽量放在其他元素外面,不要有包含与被包含关系,原因见方案二。
注意:
- Firefox不支持body的灰化,所以如果body中有背景图,请移到其他元素中;
- 不支持IE10、IE11,需要利用Grayscale.js来实现灰化。
2.插件Grayscale.js
上面的方法仅能满足目前谷歌和火狐内核的浏览器及IE10以下浏览器,对IE10和IE11并没有作用。
如果要对IE高版本系列产生作用,请点击下载 grayscale.js,这是一款图片去色特效插件及实例,可将任意的彩色图片剥离色彩变成其它色调。
在js中直接调用,传参为需要做黑白配色处理的DOM元素,如需全站覆盖则不传
<script src="./grayscale.js"></script><script type="text/javascript">
$(document).ready(function(){//本部分内容可以放在页面</body>后面,总之是等页面加载完再渲染成黑白灰var navStr = navigator.userAgent.toLowerCase();if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11grayscale(document.body); //全站渲染//grayscale(document.getElementsByTagName("img"));//img图片渲染}
}
这种全页面重新渲染的方式将会耗费大量的时间和内存~~,所以尽量在代码里限制只能为IE10和IE11时才可全局渲染。
如果和方案一中一样需要局部不改变颜色,则也只能局部渲染。由于grayscale.js
没有对局部恢复颜色的功能,所以在html构建时要将渲染与不渲染的元素分离。这也是为什么在方案一中提示大家要把元素分开,尽量不要有包含与被包含关系,否则轮到grayscale.js
使用时就麻烦了。
grayscale(document.getElementById("top"));
grayscale(document.getElementById("header"));
grayscale(document.getElementById("navigation"));
grayscale(document.getElementById("sub-navigation")); //若该元素不存在,则全局渲染~~,注意
grayscale(document.getElementById("main"));
grayscale(document.getElementById("linkage"));
grayscale(document.getElementById("footer"));
另外需要注意的是grayscale
如果所含元素不存在,则会变成全页面,渲染,所以一定要确认本页中是否存在该元素。
3.仅图片有效
除了用方案二解决IE10和IE11不支持的问题,也可以使用该段javascript代码:
varimgObj = document.getElementById('js-image');
function gray(imgObj) { var canvas = document.createElement('canvas'); var canvasContext = canvas.getContext('2d'); var imgW = imgObj.width; var imgH = imgObj.height; canvas.width = imgW; canvas.height = imgH; canvasContext.drawImage(imgObj, 0, 0); var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH); for(vary = 0; y < imgPixels.height; y++){ for(varx = 0; x < imgPixels.width; x++){ var i = (y * 4) * imgPixels.width + x * 4; var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3; imgPixels.data[i] = avg; imgPixels.data[i + 1] = avg; imgPixels.data[i + 2] = avg; } } canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height); return canvas.toDataURL();
}
imgObj.src = gray(imgObj);
本代码仅针对图片有效。
4.SVG
方案一中已经实现了该方法,这里单拎出来说一下SVG Filter
,你需要创建一个SVG文件,并将以下代码写在里面,保存命名为***.svg
<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>
然后利用过滤器的属性,我们可以通过SVG文件中的元素的ID连接SVG文件
img { filter:url('img/gray.svg#grayscale');
}
你也可以把它放到CSS文件中,例如:
img { 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");
}
5.重做
以上方法并非能100%实现灰化,在某些实在无法完成的情况下,那就只能对部分无法实现的地方重新制作~~~
网站风格变黑白的方法,用css或javascript方法将网站改为灰色相关推荐
- 网站样式变黑白的办法
2019独角兽企业重金招聘Python工程师标准>>> 很多网站特别是国内大中型网站,都变成黑白的样式风格来表达哀思.很多的个人博客也把标志或者头像改为黑白,飞龙也想把网站改成黑白的 ...
- 把网站服务器调黑白,网站快速变黑白灰色的4种方法
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么天下数据小编就说说,通过几行 ...
- 沉痛悼念!网站快速变黑白灰色的4种方法
一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念.那么今天小编就说说,通过几行简单 ...
- W3schools——一个学习 HTML,CSS 和 Javascript 的好网站
2019独角兽企业重金招聘Python工程师标准>>> W3Schools 号称是世界上最大的 web 开发者网站, 地址为:https://www.w3schools.com/. ...
- 网站颜色变黑白的CSS代码,Chrome、火狐、IE
放到CSS代码底部,兼容性应该不错 /* 网站黑白代码 */ html{ filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz- ...
- 在html中双虚线怎么写,CSS虚线实现方法及多种应用实例
很多 CSS 初学者在前端开发过程中,经常会用到 CSS 虚线样式,但是不知道 CSS 虚线样式该如何实现,比如一个 CSS 这样写:border-style:dotted solid double ...
- Node.js毕业设计——基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现(毕业论文+程序源码)——供求信息网站
基于Node.js+JavaScript+MongoDB的供求信息网站设计与实现(毕业论文+程序源码) 大家好,今天给大家介绍基于Node.js+JavaScript+MongoDB的供求信息网站设计 ...
- 使用CSS和JavaScript的网络动画
在2016年都柏林DrupalCon上,Nikhil Sukul和Vidit Anjaria将与Drupal讨论动画 . 动画基础 历史 "动画"的最初迹象来自大约5000年前的伊 ...
- 使用母版頁是內容如何使用CSS和javascript(轉)
使用母版页时内容页如何使用css和javascript(转) 由于网站的主要频道页和列表页的头部和底部都是一样的,如果将每个页面放在单独的页面中,当头部和底部需要更改时维护量太大.于是想把头部和底部做 ...
最新文章
- Python 比特币 教程 之一:创建机器人
- 【052】测试数据引发的骚乱
- matlab 区间预测,用神经网络进行预测的MATLAB算法实现?
- C++中的继承(二)
- check-lxdialog.sh: line 3: $'\r': command not found
- python获取钉钉日志数据_python3实现zabbix告警推送钉钉的示例
- Think in Java之斐波那契数列
- Docker 开发环境正在崩坏!
- asp.net 按钮点击调用FileUpload
- SOUI控件的自绘和消息处理
- 模糊聚类划分matlab代码,模糊C均值聚类算法(原理+Matlab代码) - 全文
- 使用FFmpeg截取视频封面图片(完整例子)
- win7局域网计算机 慢,win7系统局域网传输速度很慢的方法介绍
- Bzoj4556: [Tjoi2016Heoi2016]字符串
- 标准解读系列之二:国家车联网产业标准体系完成各板块拼图(附标准下载)
- elk学习中遇到的一些问题
- LUEVELSMEYER的PE文件格式
- (附源码)spring boot跨境电商系统 毕业设计211003
- 大学计算机基础知识手写笔记,清华学霸手写笔记火了,如同“电脑打印版”,学渣快来“瞻仰”...
- UML时序图画法简介-sequenceDiagram