最近我們打開各大app的界面可能都是這種效果。
灰色的網易新聞
灰色的今日頭條
PC 端的灰色百度
這種黑色效果一般在一些重大事故的時候，會需要用到； 比如“邁克爾·杰克遜”網頁沒有顏色，“喬布斯” 去世的時候，全球網頁都黑了。
今天我們再次打開網站的時候，已經恢復正常了！
那么這種黑色效果是如何實現的呢？
打開百度，我們查看一下百度的樣式文件，發現在body的class中有這么一個class。
從控制臺找到對應的文件，查看對應的css內容。
這個就是網站變灰的最終代碼。
body.big-event-gray #aging-tools-pc div[class^=item-wrap],body.big-event-gray #bottom_layer,body.big-event-gray #bottom_layer .tip-hover-panel,body.big-event-gray #form,body.big-event-gray #passport-login-pop,body.big-event-gray #s-hotsearch-wrapper,body.big-event-gray #s_content_1,body.big-event-gray #s_content_100,body.big-event-gray #s_menu_gurd,body.big-event-gray #s_side_wrapper,body.big-event-gray #u1,body.big-event-gray .advert-shrink,body.big-event-gray .bdlayer,body.big-event-gray .popup-advert,body.big-event-gray .s-ctner-menus .s-menu-item-underline,body.big-event-gray .s-menu-container,body.big-event-gray .s-news-rank-wrapper,body.big-event-gray .s-skin-container.skin-gray-event,body.big-event-gray .s-top-left-new.s-isindex-wrap,body.big-event-gray .under-searchbox-tips,body.big-event-gray>div[class^=cards_pop] {
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
filter: gray
}查詢MDN可以看到：
CSS屬性 將模糊或顏色偏移等圖形效果應用于元素。濾鏡通常用于調整圖像、背景和邊框的渲染。
CSS 標準里包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡，通過一個 URL 鏈接到 SVG 濾鏡元素（SVG ）。
使用方法：
/* URL to SVG filter */
filter: url("filters.svg#filter-id");
/* 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: revert;
filter: unset; 
想讓網站變灰，我們只需要關注一個屬性“”：
()
() : 對圖片進行灰度轉換，它是 的子屬性。
需要傳遞一個參數，可以是 或
. 當值為 100% 時，灰度最大。0% 時與原圖沒有區別。0% 到 100% 之間的值會使灰度線性變化。 為空時使用值為1.
回到百度的首頁，去除body變灰的樣式“big-event-gray”后網頁沒有顏色，頁面恢復了彩色效果。
一行css 就可以搞定，灰常的簡單，小伙伴們有沒有get到。
【感謝您的閱讀，如果您覺得文章對你有益，請點下贊，右上角加個關注吧！
長按點贊會有彩蛋喲~】
#頭條創作挑戰賽# #web#
#熱門推送##熱門#