本日人氣:99999
    累積人氣:999999

    • 首頁
    • 數位科技生活
    • 專業技術評測
    • APP 教學與進階
    • 電腦與網路
    • 相機與攝影
    • 吃喝玩樂生活
    • 阿輝碎碎念

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

    創作者介紹

    廖阿輝 3C 資訊碎碎念

    ahuiliao 發表在 痞客邦 PIXNET 留言(1) 人氣()


    留言列表 (1)

    發表留言
    • 悄悄話

    您尚未登入,將以訪客身份留言。亦可以上方服務帳號登入留言

    請輸入暱稱 ( 最多顯示 6 個中文字元 )

    請輸入標題 ( 最多顯示 9 個中文字元 )

    請輸入內容 ( 最多 140 個中文字元 )

    請輸入左方認證碼:

    看不懂,換張圖

    請輸入驗證碼