如何让网页黑白化

最新推荐文章于 2024-07-31 14:35:30 发布

Meltkk01

最新推荐文章于 2024-07-31 14:35:30 发布

阅读量6.3k

点赞数

文章标签： html 前端 css

本文链接：https://blog.csdn.net/m0_55821081/article/details/126915159

版权

如果近期有重要人物去世、重大灾难或者某天是伟人的逝世时间，为了表达哀悼纪念，常常需要将网页黑白化，这里给出黑白化网页的几种方法。

<style> 
    html { 
        -webkit-filter: grayscale(100%); 
        -moz-filter: grayscale(100%); 
        -ms-filter: grayscale(100%); 
        -o-filter: grayscale(100%); 
        filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);  
        _filter:none; 
    } 
</style>

将这段代码加在<head>和</head>之间就可以了。

如果只想让图片黑白化，可以用到CSS的滤镜属性
```
img {
    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */
    filter: grayscale(100%);
}
```
上面的代码通过 img 选择器将所有图片改成了黑白色。该属性对于IE等老旧浏览器并不友好。filter:progid:DXImageTransform.Microsoft.BasicImage()此行代码为IE自己提供的滤镜实现，性能不太友好。