如何禁用使用CSS的圖像的顏色？

Question

這是一個小問題。如果你去www.thumbtack.com/jobs，然後去他們的贊助商。你可以看到，起初你不能看到贊助商名字中的顏色，但是當你將鼠標懸停在他們身上時，你會看到顏色出現。有人能告訴我如何做到這一點。我不知道在谷歌上搜索什麼（例如使用什麼關鍵字）。我試圖使用檢查元素，但無法弄清楚它是如何做到的。任何幫助將不勝感激。

Answer 1

最廣泛兼容的方式在CSS中做到這一點是使用單獨的圖像 - 一組灰度圖像，以及一套全綵色圖像，你用CSS :hover僞類（通常使用background-image屬性）之間進行切換，一拉：

.sponsor { 
    background-image: url('gray.png'); 
} 

.sponsor:hover { 
    background-image: url('color.png'); 
} 

你可以，如果你通過把兩種灰度和彩色版本到一個單一的形象，就像一個「窗口」，圍繞樣的移動它到圖像（如使用單個圖像實現這一目標正如Jon P指出的一種稱爲CSS Sprites的技術）。例如，如果該標誌是黑白200x100，在頂部和顏色上的底部創建灰色200x200的圖像，並且這樣做：

.sponsor { 
    width: 200px; 
    height: 100px; 
    background-image: url('logos.png'); 
    background-position: 0px 0px; 
} 

.sponsor:hover { 
    background-position: 0px -100px; 
} 

基於圖像的解決方案，這個人是最好的，因爲作爲喬恩指出它可以減少頁面加載時間，並且還可以防止第一次鼠標懸停圖像時發生延遲。另外，它的HTTP請求少一個，這對高延遲連接（如手機數據連接）有重要影響。

但是，如果你的目標相對較新的瀏覽器，你也許可以使用CSS過濾器：

.sponsor { 
    filter: grayscale(1.0); 
} 

.sponsor:hover { 
    filter: none; 
} 

不幸的是，這種功能目前僅適用於Safari瀏覽器，鉻，歌劇的新版本，和其他基於WebKit的瀏覽器。它目前也是一個前綴屬性，因此您需要將它用作-webkit-filter。

Answer 2

你可以用CSS3做到這一點：

.object { 
    -webkit-filter: grayscale(100%); 
    -moz-filter: grayscale(100%); 
    -ms-filter: grayscale(100%); 
    -o-filter: grayscale(100%); 
    filter: grayscale(100%); 
    filter: url(grayscale.svg); 
/* Firefox 4+ */ 
    filter: gray; 
/* IE 6-9 */; 
} 

.object:hover { 
    -webkit-filter: none; 
    -moz-filter: none; 
    -ms-filter: none; 
    -o-filter: none; 
    filter: none; 
    filter: none; 
    filter: none; 
} 

或者你可以使用background: url()並以同樣的方式改變它懸停。