通過設置CSS樣式,可以兼容大部分的瀏覽器,代碼如下:
html {
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}
body {
filter: gray;
}
如果需要兼容IE10、11的話,需要通過JS控制,引入grayscale.js:
<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
具體JS代碼如下:
window.onload = function(){
var el = document.getElementsByTagName("body");
grayscale(el);
}