如何使网站变成黑白色彩,以示默哀

要使网站页面变成黑白效果,很简单,需要使用一个CSS特性即可实现!

即在body中添加filter: grayscale(1);如下图所示

body{
 filter: grayscale(1);
}

操作步骤(以淘宝网为例):

  1. 使用谷歌浏览器,输入淘宝网址如何使网站变成黑白色彩,以示默哀_第1张图片
  2. 右键点击检查或者点击F12,弹出控制台
  3. 找到body,在其下面输入filter: grayscale(1);如何使网站变成黑白色彩,以示默哀_第2张图片
  4. 最后效果如下图所示如何使网站变成黑白色彩,以示默哀_第3张图片
    知识点:
    1.CSS3 filter(滤镜) 属性
    filter 属性定义了元素(通常是img标签)的可视效果(例如:模糊与饱和度)。
    在上述操作中我们使用了filter: grayscale(1);
    其中grayscale灰度(值为0-1之间的小数)
    0表示灰度为0%,显示原图,1 表示灰度为100%灰色。
    在部分低版本的浏览器中(参考下图),需要变成这样:-webkit-filter:grayscale(1);
    2.浏览器支持情况:
    如何使网站变成黑白色彩,以示默哀_第4张图片

你可能感兴趣的:(如何使网站变成黑白色彩,以示默哀)