使用滤镜属性将网页从彩色变黑白

最新推荐文章于 2024-03-04 21:22:25 发布

蒲公英1001

最新推荐文章于 2024-03-04 21:22:25 发布

阅读量448

点赞数 8

文章标签： css 前端 html

本文链接：https://blog.csdn.net/wangyining070205/article/details/136420659

版权

在某些情况下，例如为了表达哀悼或纪念，许多网站会将页面颜色从彩色调整为黑白灰色。我到网上查找答案，发现有些是通过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>