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

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

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

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

html{

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

filter: grayscale(**);

}

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

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




瀏覽器支持：

grayscale()：

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

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

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

filter: gray;

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

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

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

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

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


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

• 詞條

  詞條說(shuō)明

• 軟件測(cè)試培訓(xùn)要多少錢

  很多小伙伴對(duì)軟件測(cè)試都有一個(gè)初步的了解，它也是IT行業(yè)中一個(gè)熱門的崗位，很多都覺(jué)得軟件測(cè)試要比Java開發(fā)簡(jiǎn)單一些，軟件測(cè)試的費(fèi)用應(yīng)該也要比Java開發(fā)的費(fèi)用低一些。其實(shí)不然，具體的軟件測(cè)試培訓(xùn)費(fèi)用，請(qǐng)看下面的詳細(xì)介紹。軟件測(cè)試培訓(xùn)要多少錢?軟件測(cè)試培訓(xùn)種類繁多，主要有面授課和網(wǎng)絡(luò)課。面對(duì)面教學(xué)分為全日制課程和周末課程。全日制課程一般持續(xù)3個(gè)月左右，課程系統(tǒng)全面。它將從基礎(chǔ)開始，講解功能測(cè)試、自動(dòng)

• 知了堂|網(wǎng)絡(luò)安全就業(yè)方向有哪些

  網(wǎng)絡(luò)安全就業(yè)方向比較多，一般除了傳統(tǒng)的安全服務(wù)相關(guān)崗位、側(cè)頭測(cè)試等，還包含一些移動(dòng)安全、大數(shù)據(jù)、云計(jì)算、工控等等。很多學(xué)員想從事大數(shù)據(jù)方向，但不知道這個(gè)方向未來(lái)的就業(yè)前景怎么樣，下面知了堂小編為您詳細(xì)介紹一下。數(shù)據(jù)安全策略工程師安全策略工程師主要負(fù)責(zé)完善企業(yè)的數(shù)據(jù)安全管理體系，制定數(shù)據(jù)安全策略，對(duì)各類項(xiàng)目和需求實(shí)施數(shù)據(jù)安全評(píng)審、風(fēng)險(xiǎn)評(píng)估，提供數(shù)據(jù)安全優(yōu)化和解決方案，推進(jìn)公司各項(xiàng)數(shù)據(jù)安全風(fēng)險(xiǎn)的整改落

• 網(wǎng)絡(luò)安全工程師需要學(xué)習(xí)哪些專業(yè)知識(shí)

  2022年國(guó)家網(wǎng)絡(luò)安全宣傳周于9月5日至11日在全國(guó)范圍內(nèi)統(tǒng)一舉辦，開幕式等重要活動(dòng)在安徽省合肥市舉行。為什么要舉行一年一度的網(wǎng)絡(luò)安全宣傳周，就是為了讓大家了解網(wǎng)絡(luò)安全的重要性。如今，很多企業(yè)招聘網(wǎng)絡(luò)安全工程師，但仍然有很多企業(yè)招不到合適的人才。網(wǎng)絡(luò)安全工程師崗位面臨較大的空缺。因此，成都知了堂為了培養(yǎng)出更多的網(wǎng)絡(luò)安全工程師，特開設(shè)成都網(wǎng)絡(luò)安全培訓(xùn)課程。安全測(cè)試工程師需要學(xué)習(xí)哪些專業(yè)知識(shí)?安全測(cè)試

• 2022年前端開發(fā)工程師報(bào)考流程

  在IT行業(yè)，很多轉(zhuǎn)行、提升的小伙伴，要么基礎(chǔ)不好、要么非科班出身，這種情況下，很多人選擇參加Web前端培訓(xùn)。web前端開發(fā)相對(duì)于其他軟件開發(fā)是比較容易入門且門檻低的崗位。除此之外，**還有以下優(yōu)勢(shì)：1、**人才缺口大企業(yè)前端開發(fā)人才缺口達(dá)300W+，就業(yè)難度低;2、薪資待遇好隨著市場(chǎng)需求的提升，擁有企業(yè)所需技術(shù)的Web前端開發(fā)人員薪資在不斷增加，全國(guó)前端開發(fā)工程師平均薪資達(dá)17.5K/月，不僅僅是