网站变灰是怎么样实现的
估計(jì)大家發(fā)現(xiàn)了,最近天,各大網(wǎng)站、APP的頁(yè)面都變灰了,原因想必大家都知道了。
頁(yè)面變灰
?大家可以看到很多網(wǎng)站包括主頁(yè)和內(nèi)容也都已經(jīng)變成了灰色,比如百度、B 站、CSDN 等等。
?
?這時(shí)候我們可能會(huì)好奇這是怎么做到的呢?
探究
我們選擇一個(gè)網(wǎng)站,比如360導(dǎo)航。
用的這個(gè) CSS 樣式,其內(nèi)容為:
html?{
filter: grayscale(100%);
}
因?yàn)檫@個(gè)樣式起作用了,而且還是全局的效果,因?yàn)樗亲饔迷趆tml的節(jié)點(diǎn)之上的,所以整個(gè)網(wǎng)頁(yè)變灰了。
同樣的CSDN也一樣的
CSDN 的寫法:
(如果我們想要把全站變成灰色,再考慮到各瀏覽器兼容寫法,推薦使用下面代碼,
這樣想要變灰的節(jié)點(diǎn)只需要加上 gray 這個(gè) class 就好了,比如加到 html 節(jié)點(diǎn)上就可以全站變灰)
.gray { -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);}B站
百度是包裝成了一個(gè)class:big-event-gray(原理相同)
功能實(shí)現(xiàn)
最終我們發(fā)現(xiàn)filter: grayscale 使用可以調(diào)整元素的灰度值
filter?CSS 屬性將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像,背景和邊框的渲染。
filter(可以打開查看嘗試)
總結(jié)
這里簡(jiǎn)單總結(jié)說(shuō)明一下今天get到的知識(shí)吧!
CSS屬性?filter?將模糊或顏色偏移等圖形效果應(yīng)用于元素。濾鏡通常用于調(diào)整圖像、背景和邊框的渲染。
灰色頁(yè)面,這里其實(shí)就是設(shè)置了 grayscale,其用法如下:
?
filter: grayscale(percent)將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。percent 值為 100% 則完全轉(zhuǎn)為灰度圖像,值為 0% 圖像無(wú)變化。值在 0% 到 100% 之間,則是效果的線性乘子。若未設(shè)置,值默認(rèn)是 0。另外除了傳遞百分比,還可以傳遞浮點(diǎn)數(shù),效果是一樣的。
如:
filter: grayscale(1)filter: grayscale(100%)????都可以將節(jié)點(diǎn)轉(zhuǎn)化為 100% 的灰度模式。
大家也可以點(diǎn)開上面的官方鏈接查看 ,試試新get的技巧吧!
總結(jié)
以上是生活随笔為你收集整理的网站变灰是怎么样实现的的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 矩阵思维是什么?百度百科矩阵怎么创建自己
- 下一篇: 树莓派综合项目2:智能小车(三)无线电遥