PALMisLIFE 討論區

搜索
鹹魚爸魅力四射舞蹈教室
查看: 3159|回復: 2

[網頁程式] 網站黑白化 CSS 語法

[複製鏈接]

3867

主題

126

好友

2623

積分

  • TA的每日心情

    2011-4-12 00:15
  • 簽到天數: 3 天

    連續簽到: 2 天

    [LV.2]偶爾看看I

    文章
    35006
    發表於 2013-6-4 12:24 |顯示全部樓層
    因應 6/4 某活動 (不解釋)

    只要將這語法加入網頁 CSS 樣式中,就可以讓網站變成黑白,可以生效支援:

    IE6 ~ IE9
    Chrome
    Safari, iPhone
    IE10 跟 Opera 測試不出來,如果要完整支援也可以用 JAVA Script 達成,不過效能影響過大還是算了。

    把以下的 CSS 加入網站原有的 CSS 即可,如果真的不太懂,就把下面整段放到  <head> 之後吧
    1. <style type="text/css">
    2. body *{filter:gray;}
    3. html{
    4.   filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
    5.   -webkit-filter: grayscale(100%);
    6.   -moz-filter: grayscale(100%);
    7.   -ms-filter: grayscale(100%);
    8.   -o-filter: grayscale(100%);
    9.   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 */
    10. }
    11. img {
    12.   _filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=0);
    13.   -webkit-filter: grayscale(100%);
    14.   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 */
    15. }
    16. </style>
    複製代碼
    有一些網站可能使用這個 CSS 不能生效,是因為網站沒有使用最新的網頁標準協議
    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml">
    複製代碼
    請將網頁最頭部的 <html> 替換為以上代碼。
    阿輝攝影記錄服務 | 婚禮記錄 | 活動拍攝
    http://www.giorno.tw/

    3

    主題

    1

    好友

    494

    積分

  • TA的每日心情
    開心
    2013-6-21 00:06
  • 簽到天數: 3 天

    連續簽到: 1 天

    [LV.2]偶爾看看I

    文章
    220
    發表於 2013-6-4 13:13 |顯示全部樓層

    我的firefox on linux 還有一部份是藍色的。

    本帖子中包含更多資源

    您需要 登錄 才可以下載或查看,沒有帳號?免費註冊

    回復

    使用道具 舉報

    170

    主題

    0

    好友

    703

    積分

    該用戶從未簽到

    文章
    940
    發表於 2013-6-5 09:22 |顯示全部樓層
    昨天整個PIL有點Lag,捲動網頁像在播慢動作

    點評

    jiahorng  我是用Firefox 跟 Safari  發表於 2013-6-6 13:26
    ychao  別再用IE摟...  發表於 2013-6-6 04:45
    回復

    使用道具 舉報

    您需要登錄後才可以回帖 登錄 | 免費註冊

    與站長聯繫| PALMisLIFE 掌上生活      下載:更快、更棒、更好玩

    GMT+8, 2024-3-29 14:31 , Processed in 0.053228 second(s), 35 queries , Gzip On.

    Powered by Discuz!

    © 2001-2012 Comsenz Inc. style by eisdl

    回頂部