网站都变成灰色了,它是怎么实现的? |
您所在的位置:网站首页 › html怎么变成网站 › 网站都变成灰色了,它是怎么实现的? |
大家好,我是二哥呀。 想必大家都感受到了,很多网站、APP 在昨天都变灰了,变灰的原因是为了纪念一位伟人。 先来感受一下变灰后的效果。 这是 CSDN 的 这是掘金的 这是 B站的 这种灰色的效果怎么实现的呢?如何做到图片、文字、按钮都变灰的效果呢? 方案 1,换一套灰色的 UI,那显然成本太大了,用脚指头想一想就知道不太可能。 方案 2,用魔法! 不好意思,还真被你猜中了!在网页端按下 F12,打开开发者模式,用元素选择器定位到 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);打开二哥的网站《Java 程序员进阶之路》,定位到 HTML 标签,此时可以看到页面是正常的颜色。 然后把之前的代码添加到 HTML 上,然后就可以看到色系变成灰色了。 那这段代码是什么意思呢? 直接把 filter grayscale 复制到搜索引擎里看一下。 当参数为 0 的时候,颜色是正常的。 然后依次试一下 60%: 100%: 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。 技术实现起来也比较简单,最后,缅怀一下伟人,感谢他为中国的发展所做出的一切! |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |