不久前因國家領導人逝世，為表達對他的敬意，所有互聯網平臺統統將網頁改成灰色。 如何將網頁全部變成灰色，包括按鈕和圖片。如何做到這種變灰的效果呢？ 方案一：換一套灰色的UI，這種方案成本太高，耗時太長。 方案二：使用css控制整個網頁的顏色 ~~~css html { filter:grayscale(100%); -o-filter:grayscale(100%); -ms-filter:grayscale(100%); -moz-filter:grayscale(100%); -webkit-filter:grayscale(100%); } ~~~ 有興趣的可以在瀏覽器試一下效果。這段代碼的主要作用就是：將圖像轉成灰色，參數是一個百分比。 百分比越高顏色越灰，反之百分比越小圖像顏色越接近原色。 filter是css的一個屬性，除了可以使用grayscale函數，可選函數還有一下這幾種 ~~~css html{ //模糊圖像 filter:blur(); //使圖像更亮或者更暗 filter:brightness(); //增加或減少圖像的對比度 filter:contrast(); //在圖像后面應用陰影 filter:drop-shadow(); //更改圖像的整體色調 filter:hue-rotate(); //反轉圖像的顏色 filter:invert(); //使圖像透明 filter:opacity(); //對輸入圖像進行超飽和或去飽和處理 filter:saturate(); //將圖像轉換為棕褐色 filter:sepia(); } ~~~