网页彩色图片全部变灰色(黑白)_h5前端页面中图片变黑白-CSDN博客

本文链接：https://blog.csdn.net/zxy13826134783/article/details/105307594

今天(2020年4月4日)是全国默哀日，发现部分网站的彩色图片全部变成了灰色(黑白)，本着好奇的态度，查阅了相关的资料，发现还是比较简单的，总的来说是调css样式，可以在css样式文件中加入样式代码或者在网页的<head>标签中加<style>标签并加入样式代码

本人不是很熟悉前端，有点low,所以有说得不对的地方请多多指教

步骤如下：

1 新建一个记事本文件，并编辑如下(注意：IE测试没问题，其它浏览器没有测试过,其它浏览器的可以参考：https://www.cnblogs.com/sosoft/p/3504894.html)：

<html>
   <head>
        <title>网页黑白图</title>
        <style>
          html{
		filter: grayscale(100%);
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-ms-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
		filter: gray;
		-webkit-filter: grayscale(1); 
		}
        </style>
   </head>
   <body>
         <img src="https://www.baidu.com/img/bd_logo1.png"/>
         <img src="https://www.baidu.com/img/bd_logo1.png"/>
   </body>
</html>

本例子拿了百度logo图片做演示，在网页里面加html样式代码

2 把记事本文件的后缀.txt改为.html，并鼠标双击打开效果如下图：