码迷,mamicode.com
首页 > Web开发 > 详细

如何将彩色网页变成黑白色的?(给页面加上一个灰度的滤镜)

时间:2020-04-03 20:13:05      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:none   code   写法   asi   一个   soft   ima   lte   哀悼   

明天4月4日会举行全国性哀悼活动,小伙伴需要将彩色网页都变成黑白的,代码如下:

<style type="text/css">html {-webkit-filter: grayscale(100%);}</style>

上面的 CSS 代码可能只对主流浏览器支持,如果你需要支持 QQ 浏览器、360 浏览器、IE 浏览器等等其他浏览器需要使用下面这段:

<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>

filter 是滤镜的意思,filter:gray 的意思就是说给页面加上一个灰度的滤镜,所以 html 里面的所有内容都会变成黑白的了。不过这个滤镜对于 chrome 和 safari 浏览器是无效的,所以下面会有一行-webkit-filter: grayscale(100%);这个样式是专属于使用 webkit 内核的浏览器的,意思和 FILTER: gray;差不多,只是写法不同罢了。

如何将彩色网页变成黑白色的?(给页面加上一个灰度的滤镜)

标签:none   code   写法   asi   一个   soft   ima   lte   哀悼   

原文地址:https://www.cnblogs.com/wtsx-2019/p/12628492.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!