如何让html网页变成黑白色

隔壁程序员有话说

已于 2022-12-04 13:12:20 修改

阅读量1.2k

点赞数

文章标签： css html 前端

于 2022-12-01 11:09:14 首次发布

本文链接：https://blog.csdn.net/u010420943/article/details/128128424

版权

如何让html网页变成黑白色呢？

在一些特殊时期下，html网页需要去掉原本得彩色，只显示黑白色，那么此时可以考虑使用CSS3的grayscale()方法。

关键样式代码如下：

filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);

具体调整方式：

方式一：修改css文件

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

方式二：直接修改网页

<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html {
            filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
            -webkit-filter: grayscale(100%);
        }
    </style>
</head>

方式三：修改网页html标签

<html style="filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
</body>
</html>