2023.06.01 | admin | 204次围观
文章目录
前言
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>
版权声明
本文仅代表作者观点。
本文系作者授权发表，未经许可，不得转载。
发表评论