如何改变图像的颜色上悬停

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/