网站变成灰色(置灰)

大家都感受到了，很多网站、APP 在最近都变灰了。

先来感受一下变灰后的效果。

这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？

方案 1，换一套灰色的 UI，那显然成本太大了，方案不可取。

方案 2，使用CSS函数

-webkit-filter: grayscale(1);
filter: grayscale(1);

百度一下看看 filter: grayscale(1)的意思。

MDN地址 https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function/grayscale
https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter-function

可以看到的是

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

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

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

The CSS 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 函数，可选项还有以下这些：具体更多可以参考MDN

具体实现就是将该段代码写入到html标签上

-webkit-filter: grayscale(1);
filter: grayscale(1);

具体如图：

网站变成灰色(置灰)相关推荐

小tip: 使用CSS将图片转换成黑白(灰色、置灰)[转]
小tip: 使用CSS将图片转换成黑白(灰色.置灰) 这篇文章发布于 2012年08月19日,星期日,20:41,归类于 css相关, SVG相关. 阅读 159943 次, 今日 146 次 by ...
默哀日网站置灰，支持IE浏览器h5
前端有很多方法可以将网站设置成完全灰色,可以通过调CSS样式,可以加滤镜,可以通过js控制样式等.然而,对不那么熟悉前端的后台开发或维护人员,只能从网上找办法,东拼西凑.尝试很多次,最麻烦的是IE浏览 ...
说说filter这个css属性（网站置灰实现）
在2020年4月4日这一天,大家无论打开手机.电脑网页还是APP,都可以看到所有的内容都已经变成了灰色,大家可能还会误以为是网站统一换了一套css样式,不过后面转念一想这么多网站及页面,如果要统一换样 ...
html中灰色怎么写,css如何实现置灰不可点
实现a标签置灰不可点击禁用a标签的点击事件disabled属性和pointer-events属性值首先 ,大家要知道: a标签是没有disable 属性的 , 如果想用disable 禁止a标签 ...
由置灰引出的css滤镜filter是什么东西？
文章目录前言一.什么是置灰呀? (1)选择需要的元素全部置灰吧! (2)如何置灰中抽取子内容部分不置灰呢? (3)针对ie10.11怎么搞? 二.针对iframe的内容三.filter除置灰(g ...
CSS | 探究网站变灰色的那些知识盲区的知识碎片
文章目录前言探寻日记 - 翻翻别人家探寻日记 - 官网看看真是个啥探寻日记 - 实践篇后语参考资料愿山河依旧,网站.App 从此再无灰色.黑色情况!!! 前言梦中清醒,哦,又是一个阳光 ...
怎么让jsp中的按钮置灰不能使用_UI设计中的按钮设计规范
已经有很多朋友催我更新设计规范的文章了,今天我就先来一篇,关于按钮设计规范的,后面会陆续更新其他控件内容.严格来说,按钮包括很多种,比如普通按钮.图标按钮.文字按钮.开关按钮等等. 但我觉得根据这样的 ...
iOS之实现图片的压缩、解压缩、模糊、置灰、马赛克、黑白化、调色等处理
压缩图片 func imageCompress(targetWidth:CGFloat) -> UIImage {let targetHeight = (targetWidth/width)*h ...
E9表单按钮置灰功能与单元格自定义属性说明
1:表单单元格自定义按钮配置说明 1.1:选中需要设置按钮的单元格 1.2:设置单元格自定义属性鼠标右键====>设置自定义属性====>id.name.class 如下图: 1.3:插 ...

网站变成灰色(置灰)

网站变成灰色(置灰)相关推荐

最新文章

热门文章