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

手机收藏网站代码视频号视频下载助手app

news 2025/8/6 13:36:11

手机收藏网站代码,视频号视频下载助手app,怎么建网站做,公司网站主要几方面很多网站、APP 前段时间一下都变灰了。先来感受一下变灰后的效果。这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？ 方案 1，换一套灰色的 UI，那显然成本太大了，用脚指头想一想就知道不太可能…

很多网站、APP 前段时间一下都变灰了。

先来感受一下变灰后的效果。
在这里插入图片描述
这种灰色的效果怎么实现的呢？如何做到图片、文字、按钮都变灰的效果呢？

方案 1，换一套灰色的 UI，那显然成本太大了，用脚指头想一想就知道不太可能。

方案 2，代码！！！只要再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);

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 函数，可选项还有以下这些：
在这里插入图片描述
可以看到，目前的主流浏览器版本都支持 grayscale 函数，比如说 PC 端的 Chrome、edge、Firefox、Opera、Safari 等等，除了 IE。