張貼日期:2014/8/4 上午 01:15:16
因應81高雄氣爆事件:
以下內容摘自廖阿輝 3C 資訊碎碎念:http://ahuiliao.pixnet.net/blog/post/28575474
只要將這語法加入網頁 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> 替換為以上代碼。