直播系统开发，css3滤镜属性filter实现网页变黑白效果

方法1：在你的css里加上以下代码即可，网页马上变黑白：

<br>html{<br>      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);<br>      -moz-filter: grayscale(100%);<br>      -ms-filter: grayscale(100%);<br>      -o-filter: grayscale(100%);<br>      -webkit-filter: grayscale(100%);<br>      filter: grayscale(100%);<br> }<br> 

方法2：也可以给class名字添加样式

<br><!DOCTYPE html><br><html lang=""><br>  <head><br>    <meta charset="utf-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width,initial-scale=1.0"><br>    <link rel="icon" href="<%= BASE_URL %>favicon.ico"><br>    <title><%= htmlWebpackPlugin.options.title %></title><br>  </head><br>  <body><br>  </body><br></html><br> <br>.big-event-gray{<br>      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);<br>      -moz-filter: grayscale(100%);<br>      -ms-filter: grayscale(100%);<br>      -o-filter: grayscale(100%);<br>      -webkit-filter: grayscale(100%);<br>      filter: grayscale(100%);<br>}<br> 

方法3：js里自定义开始 - 结束日期

<br><html lang=""><br>  <head><br>    <meta charset="utf-8"><br>    <meta http-equiv="X-UA-Compatible" content="IE=edge"><br>    <meta name="viewport" content="width=device-width,initial-scale=1.0"><br>    <link rel="icon" href="<%= BASE_URL %>favicon.ico"><br>    <title><%= htmlWebpackPlugin.options.title %></title><br>    <script><br>      var beginDate = new Date(2022, 11, 1, 16);<br>      var endDate = new Date(2022, 11, 1, 17);<br>      var today = new Date();<br>      if(today >= beginDate && today <= endDate ){<br>        var root = document.documentElement;  //返回html dom中的root根节点 即<html><br>        root.style.filter = 'grayscale(100%)';<br>        root.style.webkitFilter = 'grayscale(100%)';<br>        root.style.MozFilter = 'grayscale(100%)';<br>        root.style.OFilter = 'grayscale(100%)';<br>        root.style.msFilter = 'grayscale(100%)';<br>      }<br>  </script><br>  </head><br>  <body><br>  </body><br> <br></html>