網站黑白化 CSS 語法
GA 瀏覽人氣：0
因應 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> 替換為以上代碼。
延伸閱讀
- MSI 雙十一購物慶開跑！熱銷筆電、電競掌機下殺近萬元，指定機款免費升級 24GB 記憶體 購機登錄送 Lucky 植絨手機座，再抽 NT$11,111 電子現金與卡廸那零食箱，多重好康限時登場
- realme C01 入門 4G 新機即將上市！6500mAh 大電量、軍規級耐用設計一次到位 迎接雙 11 購物季，realme 精選手機與配件推出限時優惠，最低五折起
- TP-Link x 燦坤雙 11 活動優惠與阿輝選購建議
- 第 20 屆索尼世界攝影大獎免費徵件倒數！不限拍攝器材 最高可獲 2.5 萬美元獎金 2027 年賽事新增「歷史」、「動物肖像」兩大投稿類別 台灣參賽者還有機會獲得 Sony α7CR 相機
- Anker soundcore AeroClip 2 耳夾式耳機登台！搭載自研 AI 晶片、雙認證加持 32 小時續航售價 5,990 元 榮獲金氏世界紀錄認證、全球首款通過 Apple MFi 認證的耳夾式耳機 推出四款時尚配色
