一般在清明节，公祭日，伟人逝世或纪念日或大灾大难的时期，身为站长的我们大多都会让自己网站的全部或部分网页变成灰色以表达对逝者的悼念。

本文就介绍一种简单的方法来实现这个功能。

jquery-gray

jquery-gray - 在所有浏览器中将图像设置为灰度样式。

演示

示例

代码

点击按钮切换主题

切换

<!-- JQuery-gray CSS -->
<link rel="stylesheet" href="https://npmcdn.com/jquery-gray@1.7.0/css/gray.min.css">

<div class="grayscale" style="box-sizing: border-box;display: block;margin-top: 30px;padding: 20px;border-left:6px solid #2196F3;background-color: #ddffff;">
  <div style="font-weight:bold;font-size:120%;color:#7093DB;">点击按钮切换主题</div>
  <img src="https://www.logosc.cn/uploads/resources/2018/11/26/1543211331.jpg" alt="" title="示例图片" />
  <a class="btn btn-primary" style="background-color: #2196F3;color: #FFFFFF;" href="javascript:$('.grayscale').toggleClass('grayscale-off')">切换</a>
</div>

<!-- JQuery -->
<script src="https://npmcdn.com/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- JQuery-gray JS -->
<script src="https://npmcdn.com/jquery-gray@1.7.0/js/jquery.gray.min.js"></script>

Tips：不保证显示样式与本文章一致

使用

首先引入 JQuery 以及 JQuery-gray CSS & JS ：

<!-- JQuery-gray CSS -->
<link rel="stylesheet" href="https://npmcdn.com/jquery-gray@1.7.0/css/gray.min.css">

<!-- JQuery -->
<script src="https://npmcdn.com/jquery@3.6.0/dist/jquery.min.js"></script>
<!-- JQuery-gray JS -->
<script src="https://npmcdn.com/jquery-gray@1.7.0/js/jquery.gray.min.js"></script>

在需要变灰的元素加上 class="grayscale"：

<div class="grayscale">... xxx ...</div>

然后就大功告成了！当然也可以通过以下方式手动调用：

$('.my-grayscale-class').gray();

$('.my-grayscale-class').addClass('grayscale');

灰度与正常彩色切换：grayscale-off

$('.grayscale').toggleClass('grayscale-off');

由于本站主题已经引入了 JQuery 故无需再引入，示例如下：

<link rel="stylesheet" href="https://npmcdn.com/jquery-gray@1.7.0/css/gray.min.css">
<script src="https://npmcdn.com/jquery-gray@1.7.0/js/jquery.gray.min.js"></script>
<script>
(function(){
  $('.post-card').addClass('grayscale'); // 网站首页 文章 列表
  $('footer').addClass('grayscale'); // 网站底部
  $('.blog-background').addClass('grayscale'); // 网站 Banner 首图
  $('.navbar-brand').addClass('grayscale'); // 网站 Logo
})();
</script>

兼容性

支持现代主流浏览器：

• IE 6-11 (10 and 11 use the JavaScript polyfill)
• Edge 12+ (12 uses the JavaScript polyfill)
• Firefox 10+, Firefox on Android
• Chrome 19+, Chrome for Android 25+
• Android Browser 4.4+
• Safari 6+, Safari iOS 6+
• Opera 15+, Opera Mobile 16+
• BlackBerry Browser 10+