網站黑白化 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> 替換為以上代碼。
延伸閱讀
- TP-Link Archer 8 Ultra 登場 Wi-Fi 8 旗艦路由器開放預購 19Gbps 三頻高速連線、 18 支高效能天線 導入 StabilityEngine™打造穩定次世代網路體驗
- MSI Crosshair A16 HX 魔龍姬限量版登場 星芒白電競美學融合強悍效能 AMD Ryzen 9 搭配 RTX 5070 16 吋 QHD+ 240Hz 螢幕打造沉浸式遊戲體驗
- Sony 80 週年經典產品化身限定收藏小物 集點解鎖跨世代經典回憶 8 款經典產品化身 7 大復刻紀念贈品 完成指定任務即可集點兌換
- Volvo EX90 純電旗艦正式登台 800V 架構、 254 TOPS 算力與全境安全科技 SPA2 平台打造 10% 至 80% 充電僅需 22 分鐘 四車型 295 萬元起
- HONOR Magic V6 旗艦摺疊登台 主打耐用、續航與影像全面升級 同級最大 6660mAh 電量、 6400 萬畫素潛望長焦 首月購機優惠總價最高近 6 萬元
