!
也想出现在这里? 联系我们
广告位

纯CSS代码将整个网站页面变成黑白色整站灰色

对于南京大屠杀这样需要悼念的日子,一般在全国哀悼日,大地震的日子,清明节,我们都会让自己的网站全站灰色,以表示对逝者的悼念。以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。很多人也都想把自己的网站弄成全站黑白来表示自己的哀悼之情。还有其他特殊原因(比如汶川大地震)对部分事件表示哀悼,所以需要把整个网站设置为灰色或者黑白方格。那么今天就说说,通过几行简单的代码,来实现这个功能。

下面我就附上开启全站黑白的教程和代码吧,只需要一句 CSS 定义即可,要将整个网站变成灰色调,你不用去一张一张的改图片的色调,只需要在 css 文件的 html 节点上添加下面一条定义。

方法一:

  1. html {-webkit-filter: grayscale(100%);}

如果你的网站没有引用 css 文件,那么就可以直接引用下面这段 html 代码

  1. <style type="text/css">html {-webkit-filter: grayscale(100%);}</style>

上面的 CSS 代码可能只对主流浏览器支持,如果你需要支持 QQ 浏览器、360 浏览器、IE 浏览器等等其他浏览器需要使用下面这段:

  1. <style>
  2. html {
  3. -webkit-filter: grayscale(100%);
  4. -moz-filter: grayscale(100%);
  5. -ms-filter: grayscale(100%);
  6. -o-filter: grayscale(100%);
  7. filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  8. _filter:none;
  9. }
  10. </style>

将代码放入前即可让对应网页变黑灰色!filter 是滤镜的意思,filter:gray 的意思就是说给页面加上一个灰度的滤镜,所以 html 里面的所有内容都会变成黑白的了。不过这个滤镜对于 chrome 和 safari 浏览器是无效的,所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用 webkit 内核的浏览器的,意思和 FILTER: gray;差不多,只是写法不同罢了。

方法二:

下面这段代码可以变网页为黑白,将代码加到 CSS 最顶端就可以实现素装,如果网站没有使用 CSS,可以在网页/模板的 HTML 代码

和 之间插入:

  1. <style>html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}</style>

有一些站长的网站可能使用这个 css 不能生效,是因为网站没有使用最新的网页标准协议:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">

请将网页最头部的替换为以上代码。有一些网站 FLASH 动画的颜色不能被 CSS 滤镜控制,可以在 FLASH 代码的之间插入:

  1. <param value="false" name="menu"/>
  2. <param value="opaque" name="wmode"/>

方法三:

但经测试上面单纯 CSS 方法不兼容 IE10、11 浏览器,所以配合 grayscale.js 这个插件,可以完美兼容所有浏览器,这里我制作了个一键变黑白的按钮, 按钮代码用到了 JQ,需引用,可点击下面看效果

  1. <style>
  2. /* 特殊日子 全站灰色 */
  3. .site-gray, .site-gray *{
  4. filter: gray !important;
  5. filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  6. filter: grayscale(100%);
  7. -webkit-filter: grayscale(100%);
  8. -moz-filter: grayscale(100%);
  9. -ms-filter: grayscale(100%);
  10. -o-filter: grayscale(100%);
  11. }
  12. </style>
  13. <a href="javascript:;" class="site-gray" data-gray="0">网站变灰</a>
  14. <!-- 特殊日子IE10及其以上浏览器 全站灰色 -->
  15. <script src="js/grayscale.js"></script>
  16. <script>
  17. var navStr = navigator.userAgent.toLowerCase();
  18. $(".site-gray").click(function(){
  19. var gray = $(this).attr("data-gray");
  20. if( gray == 0 )
  21. {
  22. if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
  23. grayscale(document.body);
  24. grayscale(document.getElementsByTagName("img"));
  25. }
  26. $("html").addClass("site-gray");
  27. $(this).attr("data-gray", 1);
  28. }
  29. else
  30. {
  31. if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判断是IE10或者IE11
  32. grayscale.reset(document.body);
  33. grayscale.reset(document.getElementsByTagName("img"));
  34. }
  35. $("html").removeClass("site-gray");
  36. $(this).attr("data-gray", 0);
  37. }
  38. });
  39. </script>

给TA打赏
共{{data.count}}人
人已打赏
前端学习

伪类与伪元素区别

2024-7-26 13:38:31

前端学习

巧妙利用CSS自动裁剪图像

2024-7-26 13:38:42

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索