实现淘宝、京东、哔哩哔哩等网站公祭日界面变灰操作

文章目录前言实现方式前言12.13国家公祭日当天，各大电商、娱乐等网站为了追忆逝者，缅怀英烈将整个网站页面设置成灰白色调。有一些学习前端的小伙伴看到就不禁思考如何实现，比如我看到之后就在思考实现这个功能的难度，是否要将项目色彩逐一修改，那代码量大的恐怖。经过查询之后我发现其实一行代码就可以实现这个功能。提示：以下是本篇文章正文内容，下面案例可供参考实现方式*使用CSS3 filter(滤镜) 属性

jaysWu

3793人浏览 · 2021-12-15 20:10:02

jaysWu · 2021-12-15 20:10:02 发布

文章目录

前言
实现方式

前言

12.13国家公祭日当天，各大电商、娱乐等网站为了追忆逝者，缅怀英烈将整个网站页面设置成灰白色调。有一些学习前端的小伙伴看到就不禁思考如何实现，比如我看到之后就在思考实现这个功能的难度，是否要将项目色彩逐一修改，那代码量大的恐怖。经过查询之后我发现其实一行代码就可以实现这个功能。

哔哩哔哩

提示：以下是本篇文章正文内容，下面案例可供参考

实现方式

*使用CSS3 filter(滤镜) 属性,修改所有元素的颜色为黑白: grayscale(“灰度”); *

普通html页面（示例）：

<style>
	html{
		filter: grayscale(1);
		//以下代码是为了兼容chrome/ie/firefox等各大浏览器
		-o-filter: grayscale(1);
		-webkit-filter: grayscale(1);
		-ms-filter: grayscale(1);
		-moz-filter: grayscale(1);
	}
</style>

使用webpack或者构建于webpack之上的项目(例如:Vue)（示例）：

在项目静态目录下的index.html文件中编写该属性整个项目所有页面都会变成灰白色调

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
  <title><%= process.env.VUE_APP_NAME %></title>
  <style>
  	//重点代码
    html{
      filter: grayscale(1);
    }
  </style>
</head>
<body>
<noscript>
  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
    Please enable it to continue.</strong>
</noscript>
<div id="app">
  <div class="ele-admin-loading"></div>
</div>
<!-- built files will be auto injected -->
</body>
</html>