CSS｜圖像、頁面變灰

niapp項目里面要做按鈕，下載了幾個按鈕圖標(biāo)之后，想弄成灰色禁用效果，作為手越高、人越懶信念的堅定支持者，懶得再去下載灰色圖標(biāo)了，直接CSS搜起，發(fā)現(xiàn)了方便的辦法。

實例

隨便找點兒圖片：

使用此句可以全部變灰。

filter: grayscale(1)

如果是grayscal(0.5)?

只有一點兒顏色，半灰是也，如同加了個濾鏡。

filter：n. 過濾器；濾光器，濾聲器，濾波器；過濾程序，過濾軟件；（指示車輛轉(zhuǎn)彎的）分流指示燈 v. 過濾；滲入，透過；（消息、信息等）慢慢傳開，走漏；緩慢進(jìn)入，陸續(xù)步入；（車輛）看到分流指示燈的信號后轉(zhuǎn)彎；（程序）篩選。

放在自己項目里面，直接使用動態(tài)class搞定。

了紀(jì)念一些影響力很大的偉人逝世或者重要的紀(jì)念日的時候需要讓網(wǎng)頁全部變灰來表示我們對逝者的悼念。

其實這個功能很簡單，只需要在HTML 的head標(biāo)簽里加入如下代碼即可。

<style type="text/css">
html {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);}
</style>

這里實現(xiàn)的是讓網(wǎng)頁整體變灰，無論網(wǎng)站的頭部、尾部或者側(cè)邊欄分離都可以實現(xiàn)效果。網(wǎng)上有很多方法，多數(shù)都是通過CSS的濾鏡來控制頁面的顯示而已，唯一不同的就CSS代碼調(diào)用的方式而已。

很早以前想著一個網(wǎng)站那么多的圖片、手動處理后替換是一個工作量異常繁復(fù)的事，然而事情當(dāng)然沒有這么簡單，僅需幾行代碼即可輕松完成。

最后附上已故偉人的一首詞，沉痛哀悼深切緬懷...

《滿江紅·江上青百年誕辰祭》

自古英雄，憑蒼宇、江山點索。

酬壯志、鐵窗寒徹，泮池磅礴。

史嶺紅梅花瀝血，蘆溝曉月天飛鶴。

擎玉虹，魑魅冷相看，驚魂魄。

歌潁上，旗旆爍。驅(qū)稔寇，飆塵惡。

訴聲聲杜宇，孛星凋落。

春水綠楊風(fēng)曼暖，秋山紅葉日彰灼。

清明日、持酒告先靈，神州躍。

家好，我是吉礻羊。

地球母親，每年都會發(fā)生點什么情況，不過地震就是旱澇。

但是當(dāng)我們站長想表達(dá)一下自己的哀傷，又不想把網(wǎng)站上的色采全部換掉，那么下面這段css就可以幫到大家。

<style>

html {filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}

</style>

網(wǎng)站整體變成灰色，一條css完美解決

試一下吧，為了愛。

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。