年轻的母亲3韩剧_姐姐的朋友3在线|HD中文字幕在线播放,香港伦理电影在线播放,www.日韩视频,小藤的秘密动漫全集免费

一行CSS代碼代碼實現網頁變灰特效

來源:凡高網絡

時間:2020-04-04

閱讀次數:0


今天是 2020 年 4 月 4 日,星期六,清明節。

我們的國家經歷了非常慘痛的時刻,很多英雄在救助他人的路上倒下,更有很多烈士英雄保衛人民的安危遇難,今天全國下降半旗,北京時間 10 點全國默哀三分鐘,來致敬英雄們。同時今天一切公共娛樂活動也都會停止,包括直播、綜藝、影視、游戲等等。

 

我也在這里也向全國抗擊新冠肺炎疫情斗爭犧牲的烈士和逝世的同胞表達深切的哀悼,向所有在抗戰在疫情前線的工作和醫護人員致敬。我們每一個人的平安面前,都是英雄的人墻。

 

網站變灰

今天大家可以看到很多很多網站包括主頁和內容也都已經變成了灰色,比如百度、B 站、愛奇藝、CSDN 等等。

大家可以看到全站的內容都變成灰色了,包括按鈕、圖片等等。這時候我們可能會好奇這是怎么做到的呢?

有人會以為所有的內容都統一換了一個 CSS 樣式,圖片也全換成灰色的了,按鈕等樣式也統一換成了灰色樣式。但你想想這個成本也太高了,而且萬一某個控件忘記加灰色樣式了豈不是太突兀了。

其實,解決方案很簡單,只需要幾行代碼就能搞定了。

實現

我們選擇一個網站,比如 B 站吧,打開瀏覽器開發者工具。

審查一下網頁的源代碼,我們可以發現在 html 的這個地方多了一個疑似的 class,叫做 gray,gray 中文即灰色。

變灰效果

可以看到,我們只要將下面這行 CSS 樣式,加入到頁面指定節點,即可實現網頁變灰的效果。代碼如下:

為方便站點哀悼,特提供css濾鏡代碼,以表哀悼。以下為全站CSS代碼:

 

html {

    -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */

    filter: grayscale(100%);

}

使用方法:這段代碼可以變網頁為黑白,將代碼加到CSS最頂端就可以實現素裝。Wordpress用戶,可以在外觀-自定義-額外CSS中添加該代碼。

上新案例

用作品證明實力,網站建設行業排名前列

查看更多內容
您可以撥打電話與技術經理取得聯系

029-88661315    159-299-75930

您也可以掃一掃在線咨詢

為您免費定制專屬方案

您想咨詢哪些服務

高端網站設計
初創企業網站制作
小程序開發
安全運維
攝影服務