当前位置: 首页 > news >正文

网站变灰,6行代码,通通变灰

人狠话不多,直接上代码 

-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);

通通变灰,别问通通是谁。

 

 

那这段代码是什么意思呢?

直接把 filter grayscale 复制到搜索引擎里看一下。

当参数为 0 的时候,颜色是正常的。

然后依次试一下 50%:

 

MDN 是怎么解释 grayscale() 函数呢?

The grayscale() CSS function converts the input image to grayscale. Its result is a.

大致的意思就是,grayscale 是一个 CSS 函数,可以把图像转成灰色,参数是个百分比,结果返回一个 filter 函数。

TheCSS data type represents a graphical effect that can change the appearance of an input image. It is used in the filter and backdrop-filter properties.

filter 函数可以用来改变图像的显示效果,用于 CSS 的 filter 属性。除了 grayscale 函数,可选项还有以下这些:

可以看到,目前的主流浏览器版本都支持 grayscale 函数,比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等,除了 IE。

 技术实现起来也比较简单!

相关文章:

  • HCI OPCDE
  • 异构混合阶多智能体系统编队控制的分布式优化
  • 花钱去IT培训班学习几个月软件测试真的值得吗?
  • TI Lab_SRR学习_1 硬件基础 AWR1642和AWR1642EVM
  • 企业微信小程序上传图片之从微信素材库获取图片并且上传目标服务器
  • Aspose.OCR 22.11.1 for .NET Crack
  • java-net-php-python-springboot家政服务平台计算机毕业设计程序
  • 【Pytorch】第 2 章 :马尔可夫决策过程和动态规划
  • 【微服务】版本确认完成,传统方式安装Nacos
  • 展望未来 | Google Play 与时俱进,奔赴下一个十年
  • Linux网络基础(初级)
  • Akka 学习(三)Actor的基本使用
  • Nginx学习笔记
  • Java - 通过反射进行赋值以及函数调用
  • 适老化产品开发:用科技和智能解决老龄化难题
  • QuTrunk与MindSpore量子神经网络初探
  • IBM SPSS Modeler分类决策树C5.0模型分析空气污染物数据
  • 使用 gperftools 分析程序cpu性能
  • Linux 基础IO
  • 树——算法专项刷题(八)
  • BPMP 需求
  • 软件测试(概念Ⅰ) · 软件测试的基本概念 · 什么是需求 · 测试用例的概念 · 软件错误(bug)的概念
  • 理论一:当谈论面向对象的时候,我们到底在谈论什么?
  • 带你三分种了解网络用语之网络层、传输层
  • 元宵节:css画灯笼
  • 异步编程实践
  • Go XORM学习
  • 【golang/go语言】go语言中包的使用、Init()函数、协程和接口
  • 【电源专题】JEITA学习
  • cadence SPB17.4 S032 - PSpice - 仿真元件参数的含义 - 以VSIN为例
  • 2023年重庆高考588分能报什么大学 588分能上哪些院校
  • 2023年山东春季高考考试时间 什么时候考试
  • 单招被调剂可以不去吗 还能高考吗
  • 2023湖南双一流大学名单 湖南哪所学校好
  • 中专考大学要考什么科目 内容有哪些
  • 预计2023国家专项计划录取分数线是多少
  • 2021年浙江工商大学杭州商学院学费是多少 各专业收费标准
  • 神经科学专业课程有哪些
  • 2023软件工程专业课程有哪些 就业方向是什么
  • 现在进行时结构是什么 怎么构成的