2013-05-02 34 views
0

如何將圖像變成黑色/白色,然後在Safari和所有瀏覽器中懸停着色?如何將圖像變成黑/白,然後在Safari上懸停着色?

img.grayscale { 
    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+ */ 
    filter: gray; /* IE6-9 */ 
    -webkit-filter: grayscale(100%); /* Chrome 19+ & Safari 6+ */ 
    -webkit-transition: all .6s ease; /* Fade to color for Chrome and Safari */ 
    -webkit-backface-visibility: hidden; /* Fix for transition flickering */ 
} 

img.grayscale:hover { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    -webkit-filter: grayscale(0%); 
} 

http://jsfiddle.net/KDtAX/487/

此代碼不會在Safari工作。

+0

對我的作品在Safari Mac上,但不是Windows ... – Kyle 2013-05-02 08:58:06

+0

您可能需要更新您的Safari版本才能使其正常工作。或者,如果你希望它跨瀏覽器嘗試一種不同的方式,也許使用jQuery – Andrew 2013-05-02 08:59:40

+0

所有這四種情況在Safari 6.0.2中也適用於我(Mac) – pzin 2013-05-02 08:59:49

回答

1

我發現了一個解決方案,可以在Google Chrome,Safari 6+ & Opera 15+上運行。只需將以下代碼複製並粘貼到您的CSS文件中即可:

  1. 首先,將所有彩色圖像變爲黑白(100%灰色);
  2. 然後,當您將鼠標移到上方時,將圖像變回顏色。

    img { 
        filter: grayscale(100%); 
        -webkit-filter: grayscale(100%); 
    } 
    
    img:hover { 
        filter: none; 
        -webkit-filter: grayscale(0); 
    } 
    

如果你要這種效果只適用於一個圖像:

  1. 第一,給這個圖片一個唯一的ID在HTML文件中。例如:

    <img src="img/stefets-picture.png" id="stefets-picture" alt="stefets's picture"> 
    
  2. 然後,定義該ID的CSS規則在你的CSS文件:

    #stefets-picture { 
        filter: grayscale(100%); 
        -webkit-filter: grayscale(100%); 
    } 
    
    #stefets-picture:hover { 
        filter: none; 
        -webkit-filter: grayscale(0); 
    } 
    

希望這有助於

stefets

相關問題