怎麼使一行代碼實現網頁變灰

如何實現下列效果,更換多套CSS麼?那多費勁,那麼使用一招快速變更頁面爲灰色,等清明節過完了,就可以恢復

主要是給html標籤加個樣式

html.gray {
    -webkit-filter: grayscale(.95);
}

其兼容性寫法爲

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

這種寫法的官方介紹爲

https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter

filter CSS 屬性將模糊或顏色偏移等圖形效果應用於元素。濾鏡通常用於調整圖像,背景和邊框的渲染。CSS 標準裏包含了一些已實現預定義效果的函數。你也可以參考一個 SVG 濾鏡,通過一個 URL 鏈接到 SVG 濾鏡元素 (SVG filter element[1])。

參考:  https://developer.mozilla.org/en-US/docs/Web/SVG/Element/filter

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章