首页 > 编程学习 > 一文读懂如何让网页变灰白色(黑白色)

一文读懂如何让网页变灰白色(黑白色)

发布时间:2022/12/7 17:56:53

文章目录

  • 1. 文章引言
  • 2. 实现方法
    • 2.1 修改CSS文件
    • 2.2 修改html标签
    • 2.3 修改body标签
    • 2.4 使用grayscale.js插件

1. 文章引言

有段时间,我们打开知名的网页,发现全部变成黑白色了,如下图所示:

在这里插入图片描述

在这里插入图片描述

一般在清明节,全国哀悼日,大地震的日子,以及一些影响力很大的伟人逝世或纪念日的时候,身为站长的我们都会让自己的网站的全部网页变成灰色(黑白色),以表示我们对逝者的悼念。那么今天就说说,通过几行简单的代码,来实现这个功能。

首先,我需要创建test.html文件(网页),如下代码所示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>测试网页黑白色</title><style type="text/css">div {width: 200px;height: 200px;border: 1px red solid;background-color: blue}p {color: red;font-size: 30px}</style>
</head>
<body><div></div><p> 相信未来更美好</p>
</body>
</html>

效果如下所示:

在这里插入图片描述

2. 实现方法

我们可以通过如下方法,来实现test.html网页的黑白色。

2.1 修改CSS文件

我们可以在网页中加入如下代码:

<style type="text/css">html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}div {width: 200px;height: 200px;border: 1px red solid;background-color: blue}p {color: red;font-size: 30px}
</style>

在这里插入图片描述

2.2 修改html标签

修改<html>标签,加入内联样式

<!DOCTYPE html>
<html lang="en" style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
......
</html>

2.3 修改body标签

body标签加样式

body *{-webkit-filter: grayscale(100%); /* webkit */-moz-filter: grayscale(100%); /*firefox*/-ms-filter: grayscale(100%); /*ie9*/-o-filter: grayscale(100%); /*opera*/filter: grayscale(100%);filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);filter:gray; /*ie9- */   /*  但是这行代码是为了兼容IE, 虽然一行代码很少, 但是效果并不好, 而且网页比较卡, 不推荐使用[即删除,], 同时发现, csdn, 京东, 淘宝也都没有兼容IE11浏览器 */
}

2.4 使用grayscale.js插件

这个插件是模拟IEfilter:progid方法,支持IE、Safari、Chrome、Opera、Firefox等浏览器。

grayscale.js插件源文件:http://cn.baiwanzhan.com/js/gray_baiwanzhan.js

使用方法如下:

window.οnlοad=function(){grayscale(document.body);
}

但这个在IE下挺占资源。


本文链接:https://www.ngui.cc/article/show-738708.html
Copyright © 2010-2022 ngui.cc 版权所有 |关于我们| 联系方式| 豫B2-20100000