css+js網站變灰

時間 2020-07-27 標籤 css+js css 網站變灰

歷年大型地震等天然災害來臨事後，各大網站整站都變成灰色以悼念逝去的生命重寫一套css？NO，即使你有這個時間重寫，那網站內的圖片怎麼辦？難道重作一遍？很明顯工做量巨大不符合實際。火狐和chrome瀏覽器比較簡單，直接用css3搞定：javascript

<style type="text/css">
body {
    filter: grayscale(100%);/*火狐*/
    -webkit-filter:grayscale(100%);/*chrome*/
}
</style>
<body>
  <div style="color: red;">這是一段文字</div>
  <img src="./price_19.png" alt="">
</body>

對於IE7-IE9瀏覽器，能夠使用IE自帶的濾鏡，在頁面頭部內加入樣式：css

body{ filter:gray; }/*IE7-IE9，必須加在body元素上*/

IE10/11須要用grayscale.js來解決:java

<script src="grayscale.js"></script>
<script>
grayscale(document.body);
</script>

但是如今切換回IE七、IE八、IE9，css不起做用了,so，咱們須要判斷IE瀏覽器版本分別用css、js的方式處理，IE7-9下用css自帶的濾鏡，IE10-11用grayscale.js處理，那麼全兼容的寫法是:css3

<style type="text/css">
.demo{color: red;}
body{
    filter: grayscale(100%);/*火狐*/
    -webkit-filter:grayscale(100%);/*chrome*/
    filter:gray; /*IE7-9*/
}
</style>
<body>
  <div style="color: red;">這是一段文字</div>
  <img src="./price_19.png" alt="">
</body>
<script type="text/javascript" src="grayscale.js"></script>
<script type="text/javascript">
var navStr = navigator.userAgent.toLowerCase();
if(navStr.indexOf("msie 10.0")!==-1||navStr.indexOf("rv:11.0")!==-1){ // 判斷是IE10或者IE11
    grayscale(document.body);
}
</script>