在某些情况下,例如为了表达哀悼或纪念, 许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案,发现有些是通过javascript或jQuery实现的,我试了一下居然无效。
后来找到一个方法,是仅用一行CSS代码就能搞定的,只要对body使用滤镜filter: grayscale(100%);
完整代码如下:
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>黑白灰度页面</title><style type="text/css">body{-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter: grayscale(100%); /*滤镜属性*/}h2{color:red}</style></head><body><h2>测试文本</h2><img src="./img/test.jpg" alt="彩色图片"></body>
</html>