PALMisLIFE 討論區

標題: 網站黑白化 CSS 語法 [列印本頁]
作者: 阿輝    時間: 2013-6-4 12:24
標題: 網站黑白化 CSS 語法
因應 6/4 某活動 （不解釋）

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

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

把以下的 CSS 加入網站原有的 CSS 即可，如果真的不太懂，就把下面整段放到  <head> 之後吧
  1. <style type="text/css">
  2. body *{filter:gray;}
  3. html{
  4.   filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
  5.   -webkit-filter: grayscale(100%);
  6.   -moz-filter: grayscale(100%);
  7.   -ms-filter: grayscale(100%);
  8.   -o-filter: grayscale(100%);
  9.   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 */
  10. }
  11. img {
  12.   _filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
  13.   -webkit-filter: grayscale(100%);
  14.   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 */
  15. }
  16. </style>
複製代碼
有一些網站可能使用這個 CSS 不能生效，是因為網站沒有使用最新的網頁標準協議
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
複製代碼
請將網頁最頭部的 <html> 替換為以上代碼。
作者: kibymo    時間: 2013-6-4 13:13
[attach]53154[/attach]
我的firefox on linux 還有一部份是藍色的。
作者: jiahorng    時間: 2013-6-5 09:22
昨天整個PIL有點Lag，捲動網頁像在播慢動作



歡迎光臨 PALMisLIFE 討論區 (http://f.pil.tw/) Powered by Discuz! X2.5