直播系統開發，css3濾鏡屬性filter實現網頁變黑白效果

zhibo系統開發發表於2023-03-06
CSSS3Filter網頁

直播系統開發，css3濾鏡屬性filter實現網頁變黑白效果

方法1：在你的css里加上以下程式碼即可，網頁馬上變黑白：


html{

      filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

      -moz-filter: grayscale();

      -ms-filter: grayscale(;

      -o-filter: grayscale(

      -webkit-filter: grayscale

      filter: grayscale(

 }

 

方法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: grayscal

      -ms-filter: grayscal

      -o-filter: graysca

      -webkit-filter: grayscal

      filter: grayscale

}

 

方法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 = 'grayscal

        root.style.webkitFilter = 'grayscal

        root.style.MozFilter = 'graysca

        root.style.OFilter = 'grayscal

        root.style.msFilter = 'graysca

      }

  </script>

  </head>

  <body>

  </body>

 

</html>

 以上就是直播系統開發，css3濾鏡屬性filter實現網頁變黑白效果， 更多內容歡迎關注之後的文章


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69978258/viewspace-2938277/，如需轉載，請註明出處，否則將追究法律責任。

相關文章