公祭日網頁灰色效果

默哀

首先公祭日默哀。。。。

---

網頁灰色效果

百度百科在有人去世會把搜索信息頁面灰化，今天訪問b站的時候發如今公祭日這一天b站也全站灰化，各網站都以一種互聯網的風格來哀悼死者。

哀悼的同時給你們順便講下全網站灰色化的實現。

filter(濾鏡)

用法：

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();

說明：

• none: 默認值。
• blur(): 給圖像設置高斯模糊。
• brightness(): 給圖片應用一種線性乘法，使其看起來更亮或更暗。
• contrast(): 調整圖像的對比度。
• drop-shadow(): 給圖像設置一個陰影效果
• grayscale(): 將圖像轉換爲灰度圖像。
• hue-rotate(): 給圖像應用色相旋轉。
• invert(): 反轉輸入圖像。
• opacity(): 轉化圖像的透明程度。
• saturate(): 轉換圖像飽和度。
• sepia(): 將圖像轉換爲深褐色。
• url(): URL函數接受一個XML文件，該文件設置了一個SVG濾鏡，且能夠包含一個錨點來指定一個具體的濾鏡元素。

兼容性

網站灰色實現

使用 grayscale 來實現效果。

能夠設置 grayscale(100%); 來圖像轉換爲灰度圖像。

html {
    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%);
}
複製代碼

最後

願逝者安息