網站黑白化 CSS 語法

按讚加入粉絲團

因應 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> 替換為以上代碼。




延伸閱讀

Avatar

廖阿輝

阿輝目前是自由撰稿工作者 + 全職攝影師 + 社群網站經營,本身 IT 與資訊背景經驗約 10 年,也有在平面與網路媒體撰稿,文章撰寫著重技術內容為主,並以專業等級產品拍攝撰文,目前也是台灣科技新聞節目常採訪的專家 / 來賓。

發表迴響 取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步瞭解 Akismet 如何處理網站訪客的留言資料

Blogimove部落格搬家技術服務
 
未滿十八歲者請勿進入

本網頁可能內含不適合全年齡讀者閱讀的內容,請自行斟酌觀看。

並且依據「兒少法第46條」規定及民間團體成立之內容防護機構「台灣網站分級基金會」所規定之防護內容 提醒您未滿18歲者,請勿瀏覽本頁內容。

cwv3_den_title

cwv3_den_msg