天天看點

一行代碼使網站變灰

一行代碼使網站變灰

根據國務院公告,定于2020年4月4日10時,為抗擊新冠肺炎疫情鬥争犧牲烈士和逝世同胞舉行哀悼活動。

一行代碼使網站變灰

(央視)

4月4日上午10時,上海全市範圍防空警報長鳴3分鐘,深切哀悼因新冠肺炎疫情犧牲的烈士和逝世同胞。警報響起,市民肅立默哀,車輛停駛鳴笛、列車輪船汽笛也一起鳴響,緻敬英雄,緬懷逝者。

一行代碼使網站變灰

(上海)

同時很多網站也已經換成了灰色以此來悼念犧牲的烈士和逝世的同胞

一行代碼使網站變灰

(騰訊視訊)

一行代碼使網站變灰

(淘寶)

一行代碼使網站變灰

(掘金)

如何一夜之間把網頁變成灰色?難道是程式員小哥哥加班加點的一行行改的?

當然不是,那樣工作量也太大了!

通過檢視網站源碼會看到:

一行代碼使網站變灰
一行代碼使網站變灰

就是下面一行代碼:

-webkit-filter:grayscale(100%)           

複制

文檔

https://developer.mozilla.org/en-US/docs/Web/CSS/filter

文法

/* URL to SVG filter */
filter: url("filters.svg#filter-id");

/* <filter-function> values */
filter: blur(5px);
filter: brightness(0.4);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* Multiple filters */
filter: contrast(175%) brightness(3%);

/* Use no filter */
filter: none;

/* Global values */
filter: inherit;
filter: initial;
filter: unset;           

複制

一行代碼使網站變灰

(動圖示範)