網站黑白化 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> 替換為以上代碼。
延伸閱讀
- MSI Claw 掌機專屬配件包開箱!收納 + 螢幕保護 + 信仰配件很加分~
- [影片] OneUI 6.1 大更新!S23 / Z Fold 5 / Z Flip 也有 Galaxy AI 功能實測介紹!將支援繁體中文 / 改回傳統手勢密技教學
- 彩色機登場!樂天 Kobo 發表三款全新閱讀器提升閱讀體驗 即日起早鳥預購送 800 元購書金 通路加碼最高再送 10% 點數回饋
- 網速巔峰!TP-Link Wi-Fi 7 旗艦路由器重磅上市 極致 19Gbps 網速 TP-Link Archer BE800 帶來閃電飆網體驗
- 給三星 S24 最強防護!嚴選名膜鏡頭藍寶石保護鏡 + 完美保護貼 + 包膜 + 防摔殼全保護
GA 瀏覽人氣:799