CSS能有多强大一个属性让页面变为黑白配色

背景

黑白模式在很多重大的日子都需要,这种情况是无法预知的。当发生这样的诉求时,我们需要迅速完成变更发布,css的一个属性就能实现,过后删除代码即可还原页面色彩,很方便

一行代码

为了使整个网页生效,你可以把它放在 html标签的样式里。直接写到 html 文件内,例如:

<style>
html {
  filter: grayscale(1);
}
</style>

也可以用内联样式,优先级最高:

<html style="filter:grayscale(1)">
...
</html>

原理

实现思路的话就是利用css的滤镜(filter)属性,并用了 grayscale 对图片进行灰度转换,允许有一个参数,可以是数字(0到1)或百分比,0% 到 100% 之间的值会使灰度线性变化。若未设置值,默认是 0,如果你不想完全灰掉。可以设置个相对小的数字。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值