網頁整體變灰怎么實現,web開發(fā)一定會的三種方法

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

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

網頁整體變灰怎么實現?CSS3 filter(濾鏡) 屬性

html{

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

filter: grayscale(**);

}

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

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




瀏覽器支持：

grayscale()：

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

網頁整體變灰怎么實現?IE瀏覽器

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

filter: gray;

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

經測試，在IE7-9都是沒問題的，IE9以上不能生效。

網頁整體變灰怎么實現?通用方案

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

在頁面引入js文件：

然后：

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

或者直接這樣：

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

實現原理：IE瀏覽器下是添加灰度濾鏡，這個大家都懂的。其他瀏覽器貌似使用Canvas中的getImageData方法，然后對每個像素點進行灰度轉換。

網頁整體變灰怎么實現?以上就是知了姐整理的三種常見方法，希望能夠對你的學習有幫助。關注成都知了堂web培訓機構，帶你了解更多web相關問題。


成都匯智知了堂科技有限公司專注于網絡安全培訓,Java培訓,軟件測試培訓等

• 詞條

  詞條說明

• 程序員的技術VS業(yè)務,哪個較重要

  作為一個程序員，技術和業(yè)務到底哪個較重要?相信大家都會思考這個問題。有人覺得：“技術當然重要，沒有技術根本做不了事。技術高，還可以炫耀，出去找工作輕輕松松，是不是很 cool ?”也有人覺得：“對程序員來說，業(yè)務就是做某一個系統(tǒng)的具體流程，方法!如果不懂業(yè)務，就算你技術再牛叉，又有什么用呢?你做不了任何實際的開發(fā)!有力氣卻沒地使啊!”知了姐覺得啊，業(yè)務和技術都非常重要，只是不同的階段對兩者的平衡和

• Java培訓如何快速系統(tǒng)的學習

  近幾年，Java技術的快速發(fā)展吸引很多人的關注，現在學習Java技術的同學也越來越多。目前比較常見的問題就是很多學員想知道如何快速系統(tǒng)的學校Java技術?下面知了堂Java技術培訓機構為您詳細講解學習Java技術的方法。如何快速系統(tǒng)的學習java?1：Java設計和編程思想在這個階段，主要學習Java基礎、Java面向對象、Java**、Java與數據庫。通過本階段學習，可以掌握Java中異常處理

• 零基礎學習網絡安全,注意查收這些有效學習方法

  零基礎怎么學網絡安全?網絡安全學習辦法有很多，又高效得，也有低效得，還有無效得。今天和知了姐一起來看看網絡安全的有效學習秘籍。零基礎從什么開始學網絡安全，大多數是先學網絡基礎、操作系統(tǒng)、中間件、數據庫，也就是我們大學里面基本學的那些。如果是非計算機專業(yè)，或者零基礎轉行的話也可以先從這幾個地方入手。接著再補充學習下編程語言，比如用的比較多的，入門也簡單易學的python語言。然后就是學習網絡安全基礎

• IT行業(yè),選擇Java培訓還是**培訓的就業(yè)前景好

  IT行業(yè)中，Java還是**就業(yè)前景好，這個問題主要看哪一個的適用范圍廣。根據知了堂小編目前了解的市場情況，Java的學習適用范圍廣，是一門非常使用的語言，后期的就業(yè)面也比較廣。而**呢，相比Java，發(fā)現潛力沒有那么大，轉行的選擇也沒有Java廣泛。但相比兩者的學習，**相對簡單一些，比較容易上手。那么，培訓Java或者**，如何選擇合適的培訓機構呢?首先是地址的選擇，盡量選擇離自己較近的Jav