页面想要变成黑白灰？ie如何做兼容呢？-一一网

???页面想要变成黑白灰？ie如何做兼容呢？

业务场景：某些突发情况下，页面换成黑白灰的颜色主题

解决方法1：css滤镜✌️[不需要兼容ie的同学可以使用～]

html {
   filter: grayscale(100%);//IE浏览器
  -webkit-filter: grayscale(100%);//谷歌浏览器
  -moz-filter: grayscale(100%);//火狐
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter: grayscale(1);//谷歌浏览器
}
复制代码

解决方法2: 使用grayscale.js插件[完美解决✌️][兼容性ie7+]

<!DOCTYPE html>
<html lang="en">
<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">
    <title>Document</title>
</head>
<style type="text/css">
    .demo {
        color: red;
    }
    body {
        filter: grayscale(100%);
        /*火狐*/
        -webkit-filter: grayscale(100%);
        /*chrome*/
        filter: gray;
        /*IE7-9*/
    }
</style>
<body>
    测试灰屏
    <div style="background-color: red;height: 100px;width: 100px;"></div>
    <img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Ffile.juzimi.com%2Fweibopic%2Fjxzpmo5.jpg&refer=http%3A%2F%2Ffile.juzimi.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1628663206&t=f92345afac0852b96b603ff09f0f4003"
        >
</body>
</html>
<script src="https://j11y.io/demos/grayscale/grayscale.js"></script>
<script type="text/javascript">
    grayscale(document.body);
</script>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端