• 如何让彩色网页变灰

    如何让彩色网页变灰

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

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

    1. html>
    2. <html  lang="zh">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <meta name="viewport" content="width=device-width" /> 
    6.   <title>HTML页面布局测试title>
    7. head>
    8. <body>
    9.   <div id="container" style="width:500px">
    10.  
    11.     <div id="header" style="background-color:#FF6666;">
    12.     <h1 style="margin-bottom:0;">网页主标题h1>div>
    13.  
    14.     <div id="menu" style="background-color:#FFCC99;height:200px;width:100px;float:left;">
    15.     <b>侧边栏b><br>
    16.     <img src="苹果.png" /> 
    17.     div>
    18.  
    19.     <div id="content" style="background-color:#FFFFFF;height:200px;width:400px;float:left;">
    20.     <h3>内容区域h3>
    21.     我们的周围，充斥着谣言与假象。书刊、网上的绝大多数信息都可能是噪音。哪怕是记录事实的信息，依然可能是噪音，它只是在记录客观世界里的一个点而不顾或忽略来由背景。符合主观的意愿信息，更容易形成偏见。
    22.     <br>
    23.     <br> 
    24.     要特别警惕，生活里，以讹传讹是很容易发生的。
    25.     div>
    26.  
    27.     <div id="footer" style="background-color:#99CCFF;clear:both;text-align:center;">
    28.     页脚div>
    29.  
    30.   div>
    31. body>
    32. html>

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

    】

    保存文件名：HTML页面c.html

    用浏览器打开效果如上图左。

    怎么做到让彩色网页变灰？

    在上述网页源码的标签内加入以下代码

     

    说明：grayscale(amount) :进行灰度转换。

    amount转换值的大小，可以是数字或百分比。

    当值为 100% 时，灰度最大。

    0% 时与原图没有区别。

    0% 到 100% 之间的值会使灰度线性变化。

    amount 为空时使用值为1。

    标准写法是filter: grayscale(100%)

    对webkit内核浏览器写法是-webkit-filter: grayscale(100%)

    再次用浏览器打开效果如上图右。

  • 相关阅读:
    使用Go实现健壮的内存型缓存
    portswigger lab：SQLI 盲注：利用conditional error
    【技巧】Maven重复依赖分析查找
    Springboot 连接 Mysql
    频繁full GC排查
    【记录】二进制的学习路线和资料
    [强网杯 2019]随便注
    盘点66个Pandas函数，轻松实现“数据清洗”
    OpenCV笔记整理【霍夫变换】
    从图灵机到量子计算机，计算机可以解决所有问题吗？
  • 原文地址：https://blog.csdn.net/cnds123/article/details/128207107