網(wǎng)頁整體變灰怎么實(shí)現(xiàn),web開發(fā)一定會(huì)的三種方法

時(shí)間：2022-12-02作者：成都匯智知了堂科技有限公司瀏覽：169

這幾天大家的電腦、手機(jī)各種app首頁整體變灰，這種現(xiàn)象怎么實(shí)現(xiàn)呢?一起來看看開發(fā)一定會(huì)的三種方法。

網(wǎng)頁整體變灰怎么實(shí)現(xiàn)?CSS3 filter(濾鏡) 屬性

html{

-webkit-filter: grayscale(**); /* Chrome, Safari, Opera */

filter: grayscale(**);

}

filter 屬性定義了元素(通常是

)的可視效果(例如：模糊與飽和度)。




瀏覽器支持：

grayscale()：

將圖像轉(zhuǎn)換為灰度圖像。值定義轉(zhuǎn)換的比例。值為**則完全轉(zhuǎn)為灰度圖像，值為0%圖像無變化。值在0%到**之間，則是效果的線性乘子。若未設(shè)置，值默認(rèn)是0。

網(wǎng)頁整體變灰怎么實(shí)現(xiàn)?IE瀏覽器

上面所說的css3屬性IE瀏覽器并不支持，其實(shí)這樣做已經(jīng)覆蓋了大部分瀏覽器

filter: gray;

這個(gè)屬性直接加載html上是不管用的，如果需要圖片變灰可以只將樣式作用于img標(biāo)簽，或者用*通配符作用于所有元素，這樣整個(gè)網(wǎng)站就會(huì)變灰。

經(jīng)測(cè)試，在IE7-9都是沒問題的，IE9以上不能生效。

網(wǎng)頁整體變灰怎么實(shí)現(xiàn)?通用方案

如果你執(zhí)意所有的瀏覽器都有這個(gè)效果，可以通過Greyscale.js實(shí)現(xiàn)：

在頁面引入js文件：

然后：

grayscale(document.getElementsByTagName("img"));

或者直接這樣：

grayscale(document.getElementsByTagName("html"));

實(shí)現(xiàn)原理：IE瀏覽器下是添加灰度濾鏡，這個(gè)大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對(duì)每個(gè)像素點(diǎn)進(jìn)行灰度轉(zhuǎn)換。

網(wǎng)頁整體變灰怎么實(shí)現(xiàn)?以上就是知了姐整理的三種常見方法，希望能夠?qū)δ愕膶W(xué)習(xí)有幫助。關(guān)注成都知了堂web培訓(xùn)機(jī)構(gòu)，帶你了解更多web相關(guān)問題。


成都匯智知了堂科技有限公司專注于網(wǎng)絡(luò)安全培訓(xùn),Java培訓(xùn),軟件測(cè)試培訓(xùn)等

• 詞條

  詞條說明

• Java培訓(xùn)真的有用嗎,有用的Java培訓(xùn)學(xué)習(xí)提升方法

  Java培訓(xùn)真的有用嗎?沒參加Java培訓(xùn)的人都會(huì)有這個(gè)疑問，但是縱觀參加過Java培訓(xùn)的人，百分之九十九的人都會(huì)認(rèn)為Java培訓(xùn)有用。Java培訓(xùn)有沒有用很大程度取決于你是怎么學(xué)的。好多學(xué)員在早期學(xué)習(xí)的過程中，覺得Java非常簡(jiǎn)單，稍微用些工努力一點(diǎn)就可以學(xué)習(xí)的非常好，平時(shí)也很少操練就可以掌握，但一到**階段就沒辦法用一樣的方式學(xué)習(xí)，較主要是學(xué)習(xí)效率非常明顯的下降。針對(duì)這樣的狀況，主要可以按照接

• 成都口碑和教學(xué)質(zhì)量比較好的培訓(xùn)機(jī)構(gòu)有哪些

  成都口碑和教學(xué)質(zhì)量比較好的培訓(xùn)機(jī)構(gòu)，各家的情況都參差不齊，口碑方面也是個(gè)人有個(gè)人的看法，只有通過不同的途徑進(jìn)行了解，多加對(duì)比才能得出答案。首先要關(guān)注培訓(xùn)機(jī)構(gòu)的口碑。一般在網(wǎng)上可以查看相關(guān)的培訓(xùn)機(jī)構(gòu)信息，如果有較多負(fù)面，一般都不靠譜。好的口碑是靠學(xué)員的認(rèn)可口口相傳的。其次要看培訓(xùn)機(jī)構(gòu)的師資團(tuán)隊(duì)。師資力量是衡量一個(gè)培訓(xùn)機(jī)構(gòu)好壞的重要標(biāo)準(zhǔn)，一個(gè)合格的培訓(xùn)講師在IT行業(yè)有多年的項(xiàng)目實(shí)戰(zhàn)經(jīng)驗(yàn)，并不斷學(xué)習(xí)新技

• 網(wǎng)絡(luò)安全培訓(xùn)怎么樣

  現(xiàn)在很多企業(yè)意識(shí)到，網(wǎng)絡(luò)遭受黑客攻擊、網(wǎng)站串改、數(shù)據(jù)信息泄露等網(wǎng)絡(luò)漏洞事件時(shí)，依靠運(yùn)維工程師無法及時(shí)解決，這時(shí)有一個(gè)既懂運(yùn)維又懂網(wǎng)絡(luò)安全的工程師有多重要了。那么，可以通過哪些渠道成為網(wǎng)絡(luò)安全工程師呢?知了堂小編從網(wǎng)絡(luò)安全培訓(xùn)途徑及就業(yè)兩個(gè)方面為您分析。首先，通過哪些渠道可以成為一名合格的網(wǎng)絡(luò)安全工程師?目前很多高校開設(shè)的網(wǎng)絡(luò)安全專業(yè)不是特別多，基本上隸屬于計(jì)算機(jī)系，網(wǎng)絡(luò)安全課程培訓(xùn)采用的模式與市場(chǎng)

• 零基礎(chǔ)轉(zhuǎn)行web**培訓(xùn)機(jī)構(gòu)需要多久

  前端開發(fā)作為IT行業(yè)中相對(duì)比較好學(xué)的方向，薪資水平也不低，所以很多零基礎(chǔ)的人在轉(zhuǎn)行的時(shí)候都會(huì)選擇Web前端相關(guān)的行業(yè)。而零基礎(chǔ)轉(zhuǎn)行首先需要學(xué)習(xí)**技術(shù)，那么零基礎(chǔ)參加web**培訓(xùn)機(jī)構(gòu)需要多久?零基礎(chǔ)報(bào)班參加web**培訓(xùn)，一般采用全日制線下培訓(xùn)班，學(xué)習(xí)時(shí)長(zhǎng)在6個(gè)月左右，從基礎(chǔ)開始學(xué)習(xí)，學(xué)員可以深入學(xué)習(xí)前端開發(fā)、后端開發(fā)、移動(dòng)端開發(fā)、混合開發(fā)、微信小程序等多端開發(fā)知識(shí)點(diǎn)，學(xué)員學(xué)完課程之后基本能達(dá)到