前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >老板:你也把咱们网站弄成灰色——网站变灰色如何实现

老板:你也把咱们网站弄成灰色——网站变灰色如何实现

作者头像
大熊G
发布2022-12-10 15:26:42
6580
发布2022-12-10 15:26:42
举报
文章被收录于专栏:大熊G的前端分享

从昨天下午开始,我们打开各种网站后都是灰色的,我们讲解一下如何用技术手段使网页变灰色。

//分析:我们网站的元素大多数都是img标签和其他文字行标签,文字我们直接使用color:#ccc就可以更改,图片不可能每张都更换成灰色背景,那非常不现实,一张一张改起来是多大的工程。所以一定是使用类似蒙层,滤镜的东西把原本的色彩遮罩。

利用css3属性 filter:

其实只需要一行代码就可以使网页变灰,我们利用css属性中的过滤器filter就可以实现

代码语言:javascript
复制
filter: grayscale(100%);

grayscale是将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像,值为0%图像无变化。值在0%到100%之间,则是效果的线性乘子。若未设置,值默认是0;

这是几年前我仿写的淘宝页,设置100%后效果对比一下

本文正在参加「金石计划 . 瓜分6万现金大奖」

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022-12-01,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 利用css3属性 filter:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档