每到一個(gè)時(shí)間段，網(wǎng)站總要變灰。網(wǎng)站頁面黑白色濾鏡效果實(shí)現(xiàn)技巧
2022-12-09 加入收藏
一、前言
在很多時(shí)候我們需要把整個(gè)網(wǎng)站變灰，比如“致敬”。來看看網(wǎng)站是如何實(shí)現(xiàn)整體變灰的。
人的一生是短暫的，重要的是能夠在短暫的時(shí)間內(nèi)造就無限的價(jià)值。由衷的表示致敬我們將永遠(yuǎn)銘記！
如果首頁html換成黑白風(fēng)格的，這個(gè)好實(shí)現(xiàn)?？墒敲總€(gè)封面圖都重新做一張黑白的版本，每個(gè)都是用戶自己的投稿啊，怎么保證封面圖都能黑白色呢？后期靠人工換的話，那代價(jià)也大了，而且也很傻。
二、解密HTML如何將網(wǎng)站變?yōu)楹诎?/strong>
眾所周知我們平時(shí)使用的網(wǎng)站都是IT從業(yè)者辛勤勞動(dòng)所創(chuàng)造出來的，其實(shí)創(chuàng)造一個(gè)黑白網(wǎng)頁其實(shí)并不難，真的很簡單，因?yàn)橹恍枰恍写a。
1 | html {-webkit-filter: grayscale(100%);} |
是的你沒看錯(cuò)就這一行一個(gè)網(wǎng)頁就變成了一個(gè)灰度圖
下面我將進(jìn)行一次簡單的演示
這是一個(gè)非常簡單的一段HTML代碼
突然我發(fā)現(xiàn)在html根結(jié)點(diǎn)html標(biāo)簽下面有一個(gè)屬性：filter: grayscale(1);
這是一個(gè)非常簡單的一段HTML代碼
1 2 3 4 | html{-webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */filter: grayscale(100%);} |
filter 屬性定義了元素(通常是<img>)的可視效果(例如：模糊與飽和度)。
瀏覽器支持：
1 | grayscale()： |
將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為100%則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到100%之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0。
三、IE瀏覽器
上面所說的css3屬性IE瀏覽器并不支持，其實(shí)這樣做已經(jīng)覆蓋了大部分瀏覽器
filter: gray;
這個(gè)屬性直接加載html上是不管用的，如果需要圖片變灰可以只將樣式作用于img標(biāo)簽，或者用*通配符作用于所有元素，這樣整個(gè)網(wǎng)站就會(huì)變灰。
經(jīng)測試，在IE7-9都是沒問題的，IE9以上不能生效。
四、通用方案
如果你執(zhí)意所有的瀏覽器都有這個(gè)效果，可以通過Greyscale.js實(shí)現(xiàn)：
在頁面引入js文件：
1 | <script src="http://james.padolsey.com/demos/grayscale/grayscale.js"></script> |
然后：
1 | grayscale(document.getElementsByTagName("img")); |
或者直接這樣：
1 | grayscale(document.getElementsByTagName("html")); |
實(shí)現(xiàn)原理：IE瀏覽器下是添加灰度濾鏡，這個(gè)大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對(duì)每個(gè)像素點(diǎn)進(jìn)行灰度轉(zhuǎn)換。
因此，在現(xiàn)代瀏覽器下，對(duì)于該方法，圖片的灰度處理有兩個(gè)局限性：
1. 速度。300*300這張一般般大小的圖片變灰就要數(shù)秒之久；
2. 跨域。安全性機(jī)制，無法轉(zhuǎn)換跨域的圖片為黑白色。
五、更多
對(duì)比度：filter: contrast();
色相旋轉(zhuǎn)：filter: hue-rotate();
陰影： filter: drop-shadow() ;
