網站所有顏色,圖片如何輕鬆轉換成灰度圖?

方臉橘


為表達全國各族人民對抗擊新冠肺炎疫情鬥爭犧牲烈士和逝世同胞的深切哀悼,國務院決定,2020 年 4 月 4 日舉行全國性哀悼活動。在此期間,全國和駐外使領館下半旗誌哀,全國停止公共娛樂活動。4 月 4 日 10 時起,全國人民默哀 3 分鐘,汽車、火車、艦船鳴笛,防空警報鳴響。

一般在全國哀悼日,國內各大網站都會將整站換成素裝。並建議中國所有站點更換為素裝。為方便站點變換,特提供 css 濾鏡代碼,以表哀悼。以下為全站 CSS 代碼。

使用方法:將此段 CSS 放置在網頁 head 標籤中,網站即可變為黑白灰的色調。


Web前端進階指南


CSS Filter

使用CSS過濾器屬性可能是最簡單的方法把圖像變成灰度。以往,IE瀏覽器有一個專有的CSS屬性稱為過濾應用自定義效果包括灰度。

現在,過濾器屬性是CSS3規範的一部分,並支持在一些瀏覽器,Firefox、Chrome和Safari。以前,我們也提到Webkit過濾器,它不僅將圖像變成灰色也可以變成褐色和模糊效果。


流音前端


使用前端CSS中的filter(濾鏡)屬性為100%灰度就可以了。


filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);


全部包裹住範圍就行

例:

全站變灰


*{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}



圖片變黑


img{

filter: grayscale(100%);

-webkit-filter: grayscale(100%);

-moz-filter: grayscale(100%);

-ms-filter: grayscale(100%);

-o-filter: grayscale(100%);

}


閒中數盡行人小


通過css來控制


分享到:


相關文章: