將整個網站頁面變成灰色(黑白色)

將整個網站頁面變成灰色(黑白色)

有些時候咱們須要把網站頁面變成黑白色或灰色,特別是對於一些須要悼念的日子,以及一些影響力很大的偉人逝世或記念日的時候,都會讓網站的所有網頁變成灰色(黑白色),以表示咱們對逝者或者英雄的緬懷和悼念。經過參考資料,總結出如下幾個方法能夠幫助咱們達到目的:
方法一:
<style type="text/css">
html {
  filter:grayscale(100%);
  -webkit-filter:grayscale(100%);
  -moz-filter:grayscale(100%);
  -ms-filter:grayscale(100%);
  -o-filter:grayscale(100%);
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  -webkit-filter:grayscale(1)
}
</style>


filter是濾鏡的意思,filter:gray的意思就是說給頁面加上一個灰度的濾鏡,因此html裏面的全部內容都會變成黑白的了。不過這個濾鏡對於chrome和safari瀏覽器是無效的,因此下面會有一行-webkit-filter: grayscale(100%);這個樣式是專屬於使用webkit內核的瀏覽器的,意思和FILTER: gray;差很少,只是寫法不一樣罷了。

方法二:

下面這段代碼能夠變網頁爲黑白,將代碼加到 CSS 最頂端就能夠實現素裝,若是網站沒有使用 CSS,能夠在網頁/模板的 HTML 代碼和 之間插入:
css

<style>html {filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);-webkit-filter: grayscale(100%);}</style>
html

有一些網站可能使用這個 css 不能生效,是由於網站沒有使用最新的網頁標準協議,請將網頁最頭部的替換爲如下代碼:web

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml">
chrome

有一些網站 FLASH 動畫的顏色不能被 CSS 濾鏡控制,能夠在 FLASH 代碼的和之間插入:瀏覽器

<param value="false" name="menu"/>
<param value="opaque" name="wmode"/>
動畫