<var id="30n99"></var><s id="30n99"><tr id="30n99"><u id="30n99"></u></tr></s>
<th id="30n99"></th>

<th id="30n99"><track id="30n99"><rt id="30n99"></rt></track></th>
<em id="30n99"><acronym id="30n99"></acronym></em>

<progress id="30n99"></progress>
  • Menu

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

    西安凡高網絡西安凡高網絡 錄入時間 2020-04-04 閱讀次數 0
    一鍵分享
    65.3K

    今天是 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

    經典客戶案例展示

    • 凡高微信公眾號
    • 響應式客戶端

    西安凡高網絡科技有限公司
    專注于品牌網站建設、集團網站建設、小程序開發、網站營銷推廣業務
    服務知名客戶超過2000家

    【掃一掃】與我們取得聯系
    狼友视频在线观看,老司机亚洲精品影院,狠狠久久亚洲欧美专区,韩国产三级三级香港三级日本三级,少妇人妻邻居