如何改變圖像的顏色上懸停

Question

我需要改變圖像的背景顏色。圖像是一個帶有白色背景的圓形圖像，當您將鼠標懸停在圓形圖像上時，需要將圓形圖像的背景更改爲藍色。我只需要這個圈子就可以改變。

我的HTML代碼

<div class="fb-icon"> 
<a href="http://www.facebook.com/mypage" target="_blank"> 
<img src="images/fb_normal.png" alt="Facebook"> 
</a> 
</div> 

在CSS中我寫道：

.fb-icon:hover { 
    background: blue; 
} 

上面的代碼給我藍色而是繞了一圈圖標的框架。我需要的是改變圓圈本身的背景。想象一下，當你將鼠標懸停到藍色時，它就像一個白色的信號。

請我需要一個解決方案，如果它可以通過CSS或什麼來完成。對不起，如果我讓它太長。

問題：link

Answer 1

理想情況下，你應該使用一個透明的PNG，在白色的圓圈和圖像的背景透明。然後您可以將.fb-icon的background-color設置爲藍色懸停。所以你的CSS將是：

fb-icon{ 
    background:none; 
} 

fb-icon:hover{ 
    background:#0000ff; 
} 

此外，如果你不想使用PNG的，你也可以使用精靈和改變的背景位置。精靈是一個大圖像，包含一系列較小的圖像，可通過更改背景位置將其用作背景圖像。因此，對於例如，如果與白色背景原來的圓形圖像100像素X 100像素，可以提高圖像的高度，以100像素X 200像素，使上半部分是用白色背景的原始圖像，而下半部分是藍色背景的新圖像。然後，設置設置你的CSS爲：

fb-icon{ 
    background:url('path/to/image/image.png') no-repeat 0 0; 
} 

fb-icon:hover{ 
    background:url('path/to/image/image.png') no-repeat 0 -100px; 
} 

Answer 2

如果我理解正確，那麼，如果你給你的圖像透明背景會更容易，並設置背景容器的background-color屬性，而無需使用過濾器等。

http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html

說明如何在IE中使用過濾器。也許如果你從中利用某些東西。雖然不是很兼容瀏覽器。另一種選擇可能是有兩個圖像，並把它們作爲背景圖像（不是的img標籤），換了一個又一個使用：hover僞選擇。

Answer 3

好吧，試試這個：

與透明圈獲取圖像 - http://i39.tinypic.com/15s97vd.png 把該圖像中的HTML元素，通過CSS改變元素的背景顏色。通過這種方式，您可以使用樣式表中定義的顏色獲得帶有圓圈的徽標。

的HTML

<div class="badassColorChangingLogo"> 
    <img src="http://i39.tinypic.com/15s97vd.png" /> 
    Or download the image and change the path to the downloaded image in your machine 
</div> 

CSS的

div.badassColorChangingLogo{ 
    background-color:white; 
} 
div.badassColorChangingLogo:hover{ 
    background-color:blue; 
} 

請記住，在非阿爾法能瀏覽器，如IE6及IE7這不會工作。因爲你可以使用js修復。谷歌ddbelated PNG修復，你可以得到腳本。

Answer 4

這有點晚，但我碰到了這篇文章。

這不是完美的，但這是我做的。

HTML代碼

<div class="showcase-menu-social"><img class="margin-left-20" src="images/graphics/facebook-50x50.png" alt="facebook-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/twitter-50x50.png" alt="twitter-50x50" width="50" height="50" /><img class="margin-left-20" src="images/graphics/youtube-50x50.png" alt="youtube-50x50" width="50" height="50" /></div> 

CSS代碼

.showcase-menu { 
    margin-left:20px; 
    margin-right:20px; 
    padding: 0px 20px 0px 20px; 
    background-color: #C37500; 
    behavior: url(/css/border-radius.htc); 
    border-radius: 20px; 
    } 

.showcase-menu-social img:hover { 
    background-color: #C37500; 
    opacity:0.7 !important; 
    filter:alpha(opacity=70) !important; /* For IE8 and earlier */ 
    box-shadow: 0 0 0px #000000 !important; 
} 

現在我20像素的邊界半徑與圖像邊界半徑完全匹配起來。正如你所看到的.showcase-menu與.showcase-menu-social具有相同的背景。這樣做是爲了讓「不透明」生效，並且沒有「正方形」背景或邊框顯示，因此圖像稍微減少了懸停時的飽和度。

這是一個很好的效果，確實給觀衆的反饋，圖像是焦點。我相當確定在黑暗的背景下，它會有更好的效果。

好的是，這是有效的HTML-CSS代碼，並將進行驗證。說實話，它應該對非圖像元素和圖像一樣好。

享受！

Answer 5

使用background-color屬性代替CSS中的背景屬性。 所以，你的代碼看起來就像這樣：
.fb-icon:hover {
background: blue;
}

Answer 6

另一種解決辦法是使用新的CSS掩模圖像功能，這一切除了IE（仍在IE11不支持）的作品。與其他解決方案中的一些解決方案相比，這將更具多功能性和可維護性。你也可以更普遍地使用SVG。 例如

item { mask: url('/mask-image.png'); } 

這裏有使用掩模圖像的例子：

http://codepen.io/zerostyle/pen/tHimv 

的例子很多這裏：

http://codepen.io/yoksel/full/fsdbu/