900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > CSS | 探究网站变灰色的那些知识盲区的知识碎片

CSS | 探究网站变灰色的那些知识盲区的知识碎片

时间:2022-08-11 04:50:08

相关推荐

CSS | 探究网站变灰色的那些知识盲区的知识碎片

文章目录

前言探寻日记 - 翻翻别人家探寻日记 - 官网看看真是个啥探寻日记 - 实践篇后语参考资料

愿山河依旧,网站、App 从此再无灰色、黑色情况!!!

前言

梦中清醒,哦,又是一个阳光明媚的早上。

致敬英雄,市面上 App、网站等都已置灰。

缅怀的同时,突然冒出一个问题,怎么做到的?难不成一个个调整图片,调整对应的控件色值?

显然不应该。想来想去还不如直接调试一番,找找感觉。

探寻日记 - 翻翻别人家

Chrome 打开 B 站,直接打开开发者模式,html 根节点有个 class=“gray”,好奇点点看看有什么反映:

一个 class 搞定吗?抱着怀疑的心态找了掘金:

共同点,都是使用了 filter:grayscale。

探寻日记 - 官网看看真是个啥

filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。

官方给出一个小例子:

找到对应将图像转为灰色图像属性:

探寻日记 - 实践

俗话说得好,好记性不如烂笔头,自己亲自动手才是最实际的。

效果很明显,如果想让整个页面图片灰度发生变化,只需要按照前辈们的方案,直接在 html 设置 class 即可,方案采用掘金:

附上对应 CSS 样式:

.mourning {-webkit-filter: grayscale(100%); /* 兼容 Chrome、Safari 浏览器 */-moz-filter: grayscale(100%); /* 兼容 FireFox 火狐浏览器 */-ms-filter: grayscale(100%); /* 兼容 IE 浏览器 */-o-filter: grayscale(100%); /* 兼容 Opera 浏览器 */filter: grayscale(100%);filter: #808080;}

篇后语

哪有什么岁月静好,不过是有人替你负重前行。

心怀感恩。

最后,再次希望所有的网站再也不要有变成灰色、黑色的情况!!!

永远也不要有了!!!

参考资料

Web 开发技术 > CSS(层叠样式表) > filter

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。