查看: 3657|回復: 2

[網頁程式] 網站黑白化 CSS 語法

[複製鏈接]

阿輝

3867 主題	126 好友	2626 積分

TA的每日心情

	怒 2011-4-12 00:15

簽到天數: 3 天

連續簽到: 2 天

[LV.2]偶爾看看I

文章: 35006

發消息

電梯直達

1^#

發表於 2013-6-4 12:24 |只看該作者 |倒序瀏覽

因應 6/4 某活動（不解釋）

只要將這語法加入網頁 CSS 樣式中，就可以讓網站變成黑白，可以生效支援：

IE6 ~ IE9
Chrome
Safari, iPhone
IE10 跟 Opera 測試不出來，如果要完整支援也可以用 JAVA Script 達成，不過效能影響過大還是算了。

把以下的 CSS 加入網站原有的 CSS 即可，如果真的不太懂，就把下面整段放到 <head> 之後吧

<style type="text/css">
body *{filter:gray;}
html{
filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}
img {
_filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
-webkit-filter: grayscale(100%);
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
}
</style>

複製代碼

有一些網站可能使用這個 CSS 不能生效，是因為網站沒有使用最新的網頁標準協議

<!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">

複製代碼

請將網頁最頭部的 <html> 替換為以上代碼。