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

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

這幾天大家的電腦、手機(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)等

• 詞條

  詞條說明

• 知了堂為四川輕化工大學(xué)開展網(wǎng)絡(luò)安全專題項(xiàng)目集訓(xùn)

  受**和整體經(jīng)濟(jì)環(huán)境影響，全國(guó)就業(yè)形勢(shì)嚴(yán)峻。2022年，高校畢業(yè)生數(shù)量**突破一千萬，被稱為“史上較難就業(yè)季”。據(jù)某網(wǎng)站《2022年一季度高校畢業(yè)生就業(yè)市場(chǎng)景氣報(bào)告》顯示，畢業(yè)生群體就業(yè)難度**全國(guó)平均水平。但是，網(wǎng)絡(luò)安全人才的崗位需求卻在穩(wěn)步增長(zhǎng)。眾所周知，企業(yè)在網(wǎng)安人才時(shí)，理論與實(shí)踐并重，為了有效幫助高校大學(xué)生提升攻防實(shí)戰(zhàn)能力，2022年10月28日，知了堂網(wǎng)絡(luò)安全團(tuán)隊(duì)基于長(zhǎng)城網(wǎng)絡(luò)靶場(chǎng)競(jìng)技系統(tǒng)

• java初學(xué)者應(yīng)該怎么學(xué),規(guī)劃好才能學(xué)的較快捷

  java的薪資待遇讓很多人盯上了這塊肥肉，所以學(xué)習(xí)JAVA的人也就越來越多。而作為java初學(xué)者應(yīng)該怎么學(xué)?規(guī)劃好才能學(xué)得較快捷。很多人都是在網(wǎng)上找java基礎(chǔ)視頻，但是難就難在堅(jiān)持和連貫。所謂堅(jiān)持，就是你可能得花上2到3個(gè)月的時(shí)間去系統(tǒng)的學(xué)習(xí)Java基礎(chǔ)、web基礎(chǔ)、主流框架(spring、SpringMVC、mybatis)，再一個(gè)就是連貫~很多人就敗在這個(gè)上面。但是如果前期沒有把基礎(chǔ)打牢，后

• 培訓(xùn)機(jī)構(gòu)出來的程序員，真的會(huì)遭受“隱形歧視”嗎

  有人認(rèn)為，培訓(xùn)機(jī)構(gòu)出身的程序員屬于“根不紅苗不正”，且這點(diǎn)并非**于IT領(lǐng)域，其他行業(yè)對(duì)于培訓(xùn)機(jī)構(gòu)出身的從業(yè)者或多或少都帶有一點(diǎn)“議論”。那么，培訓(xùn)機(jī)構(gòu)出來的程序員真的會(huì)遭受隱形歧視嗎?其實(shí)，對(duì)于IT行業(yè)來說，真正注重的是技術(shù)，并不是出身，培訓(xùn)機(jī)構(gòu)只是一種學(xué)習(xí)途徑，作為程序員，技術(shù)和能力才是立身之本，而且后期的發(fā)展如何也是看技術(shù)的支撐。對(duì)于想轉(zhuǎn)行，或想要深造學(xué)習(xí)的同學(xué)，要考慮的應(yīng)該是自己如何去實(shí)現(xiàn)

• 網(wǎng)絡(luò)安全培訓(xùn)哪家較靠譜

  對(duì)于大部分網(wǎng)絡(luò)小白來說，報(bào)班培訓(xùn)不是首先考慮的事，第一步是先確定自己需不需要入網(wǎng)絡(luò)安全這一行，找網(wǎng)絡(luò)安全培訓(xùn)機(jī)構(gòu)前你要反復(fù)的問自己：“自己到底適不適合學(xué)網(wǎng)絡(luò)安全、是不是真的對(duì)網(wǎng)絡(luò)安全感興趣”?等確定自己想清楚了，下定決心要去培訓(xùn)的同學(xué)，也要對(duì)培訓(xùn)機(jī)構(gòu)有一定的敬畏心，不要覺得報(bào)了培訓(xùn)班就可一蹴而就，千萬不要盲目樂觀，把培訓(xùn)機(jī)構(gòu)都想的太好了。一個(gè)好的*人(好的網(wǎng)絡(luò)安全培訓(xùn)機(jī)構(gòu))應(yīng)該是怎么樣的呢?首先