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

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

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

 


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

​

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

 


<!DOCTYPE html>
<html lang="">
  <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><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
  </body>
</html>
 
.big-event-gray{
      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
      -moz-filter: grayscale(100%);
      -ms-filter: grayscale(100%);
      -o-filter: grayscale(100%);
      -webkit-filter: grayscale(100%);
      filter: grayscale(100%);
}
 

 

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

 


<html lang="">
  <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><%= htmlWebpackPlugin.options.title %></title>
    <script>
      var beginDate = new Date(2022, 11, 1, 16);
      var endDate = new Date(2022, 11, 1, 17);
      var today = new Date();
      if(today >= beginDate && today <= endDate ){
        var root = document.documentElement;  //返回html dom中的root根节点 即<html>
        root.style.filter = 'grayscale(100%)';
        root.style.webkitFilter = 'grayscale(100%)';
        root.style.MozFilter = 'grayscale(100%)';
        root.style.OFilter = 'grayscale(100%)';
        root.style.msFilter = 'grayscale(100%)';
      }
  </script>
  </head>
  <body>
  </body>
 
</html>

 

 以上就是直播系统开发，css3滤镜属性filter实现网页变黑白效果， 更多内容欢迎关注之后的文章

 

posted @ 2023-03-06 14:09  云豹科技-苏凌霄  阅读(98)  评论(0)    收藏  举报