在網(wǎng)站設計中,有時需要將整個站點變?yōu)榛疑娘L格,給人以沉穩(wěn)、簡潔、高級的感覺。這種效果一般使用 CSS 技術來實現(xiàn),具體步驟如下:
/* 1.定義一個全站通用樣式 */ html { filter: grayscale(100%); } /* 2.排除一些需要排除的元素 */ html *, html *::before, html *::after { filter: none !important; } /* 撤銷導致元素變灰的瀏覽器用戶代理樣式 */ body { filter: none !important; -webkit-filter: none !important; } /* 給被排除元素恢復顏色 */ img, video, svg, input, textarea, canvas { filter: none !important; }
代碼中使用了 `filter` CSS 屬性,該屬性指定元素的圖像或圖形在呈現(xiàn)之前應該如何處理,本例中使用了 `grayscale(100%)`,使整個頁面變?yōu)榛疑{,排除了一些需要恢復顏色的元素。
以上就是將整站變?yōu)榛疑L格的實現(xiàn)方法,當然還可以根據(jù)具體需求進行個性化的調整,比如添加 CSS 動畫、在某些元素上加入顏色等等。