记忆角落

  • {{ item.name }}
  • 首页
  • 关于
  • 归档
  • 邻居
  • 捐赠

记录一下最近很火的用一行代码实现网页变灰

  • 郭良俊只狗
  • 2020-04-06
  • 0

2020 年 4 月 4 日,星期六,清明节。基本上你看到的主流网站都变灰白了(虽然我的也是...),大家可以看到全站的内容都变成灰色了,包括按钮、图片等等。这时候我们可能会好奇这是怎么做到的呢?

有人会以为所有的内容都统一换了一个 CSS 样式,图片也全换成灰色的了,按钮等样式也统一换成了灰色样式。

但你想想这个成本也太高了,而且万一某个控件忘记加灰色样式了岂不是太突兀了。

其实,解决方案很简单,只需要几行代码就能搞定了。

直接css:

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

也是用的这个 CSS 样式,其内容为:

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

这个实现看起来兼容性会更好一些,所以通过一个全局的 CSS 样式就能将整个网站变成灰色效果。

从上面css样式代码中看到有个样式名叫做 filter,于是搜下 MDN 的官方介绍。

其链接为:https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter 大家不妨可以进去学习一下。


© 2012 - 2023 记忆角落 网站统计
Theme by Wing
粤ICP备14056850号-1 又拍云CDN赞助