如何让彩色网页变灰

最新推荐文章于 2022-12-17 16:08:21 发布

学习&实践爱好者

最新推荐文章于 2022-12-17 16:08:21 发布

阅读量457

点赞数

分类专栏： HTML5与CSS3 前端开发文章标签： css html

本文链接：https://blog.csdn.net/cnds123/article/details/128207107

版权

HTML5与CSS3 同时被 2 个专栏收录

84 篇文章 15 订阅

订阅专栏

前端开发

70 篇文章 4 订阅

订阅专栏

如何让彩色网页变灰

在特殊的日子（如清明节特殊纪念日等），需要让彩色网页变成灰色（黑白色）如下图所示，怎么做到呢？

下面先给出彩色正常的网页示例源码：

<!DOCTYPE html>
<html  lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width" /> 
  <title>HTML页面布局测试</title>
</head>
<body>
  <div id="container" style="width:500px">

    <div id="header" style="background-color:#FF6666;">
    <h1 style="margin-bottom:0;">网页主标题</h1></div>

    <div id="menu" style="background-color:#FFCC99;height:200px;width:100px;float:left;">
    <b>侧边栏</b><br>
    <img src="苹果.png" /> 
    </div>

    <div id="content" style="background-color:#FFFFFF;height:200px;width:400px;float:left;">
    <h3>内容区域</h3>
    我们的周围，充斥着谣言与假象。书刊、网上的绝大多数信息都可能是噪音。哪怕是记录事实的信息，依然可能是噪音，它只是在记录客观世界里的一个点而不顾或忽略来由背景。符合主观的意愿信息，更容易形成偏见。
    <br>
    <br> 
    要特别警惕，生活里，以讹传讹是很容易发生的。
    </div>

    <div id="footer" style="background-color:#99CCFF;clear:both;text-align:center;">
    页脚</div>

  </div>
</body>
</html>

【为方便新手实验，给出源码中用到的图片苹果.png