网站都变成灰色了，它是怎么实现的？

刺骨的言语ヽ痛彻心扉 2023-09-25 13:56 101阅读 0赞

大家可能发现最近很多网站都变成灰色系，效果如下

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

它是怎么实现的呢？显然换一整套UI成本太大了，肯定不可能。

我们打开网站查看源码可以看到 html 标签上有这段源码。

在这里插入图片描述

复制一下。

  1. -webkit-filter: grayscale(100%);
  2. -moz-filter: grayscale(100%);
  3. -ms-filter: grayscale(100%);
  4. -o-filter: grayscale(100%);
  5. filter: grayscale(100%);
  6. filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);

我们打开一个正常颜色的地址

在这里插入图片描述

将这段样式加到HTML标签上，就可以看到变成了灰色系。

在这里插入图片描述

那这段代码是啥意思呢？

grayscale 是一个 CSS 函数，可以把图像转成灰色，参数值为0-1之间，结果返回一个 filter 函数。0 表示灰度为 0%，显示原图，1 表示灰度为 100% ，显示灰色。

  1. grayscale(100%)

filter 属性可以改变元素的可视效果（如：模糊、对比度和饱和度等）。

  1. filter: grayscale(100%);

所以filter: grayscale(100%)会呈现灰色哀悼模式，以此来纪念缅怀伟人先烈们。

发表评论

表情：
评论列表 （有 0 条评论，101人围观）

还没有评论，来说两句吧...

相关阅读