blocks|key|1457596|text|如果我理解正确的话，那么如果你给你的图片一个透明的背景，并设置背景容器的背景颜色属性，而不需要使用滤镜等等，这将会更容易。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1457597|http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html|offset|length|1457598|演示如何在IE中使用筛选器。也许你可以利用其中的一些东西。不过跨浏览器的兼容性不是很好。另一种选择可能是有两个图像，并将它们用作背景图像(而不是img标记)，使用:hover伪选择器逐个交换。|1457599|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|29|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@$D|Q|E|R|1|S]]|A|$]]|$1|F|3|G|5|6|7|T|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|U|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|C]]]]

If I understand correctly then it would be easier if you gave your image a transparent background and set the background container's background-color property without having to use filters and so on.

<a href="http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html" rel="nofollow">http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html</a>

Shows you how to use filters in IE. Maybe if you leverage something from that. Not very cross-browser compatible though. Another option might be to have two images and use them as background-images (rather than img tags), swap one out after another using the :hover pseudo selector.

blocks|key|440984|text|理想情况下，您应该使用透明的PNG，圆形为白色，图像的背景为透明。然后，您可以在悬停时将.fb-icon的background-color设置为蓝色。所以你的CSS应该是：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|440985|fb-icon{
++++background:none;
}

fb-icon:hover{
++++background:#0000ff;
}|code-block|syntax|javascript|440986|另外，如果你不想使用PNG，你也可以使用sprite来改变背景位置。精灵是一个大图像，其中包含一组较小的图像，可以通过改变背景位置来用作背景图像。因此，例如，如果您的白色背景的原始圆形图像是100px+X+100px，您可以将图像的高度增加到100px+X+200px，以便上半部分是白色背景的原始图像，而下半部分是蓝色背景的新图像。然后将您的CSS设置为：|BOLD|440987|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;
}|440988|entityMap^0|18|8|1H|G|0|0|2N|D|3D|D|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|W|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|X|8|@$9|Y|A|Z|B|M]|$9|10|A|11|B|M]]|D|@]|E|$]]|$1|N|3|O|5|H|7|12|8|@]|D|@]|E|$I|J]]|$1|P|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|Q|$]]

Ideally you should use a transparent PNG with the circle in white and the background of the image transparent. Then you can set the <code>background-color</code> of the <code>.fb-icon</code> to blue on hover. So you're CSS would be:

<pre><code>fb-icon{
 background:none;
}

fb-icon:hover{
 background:#0000ff;
}
</code></pre>

Additionally, if you don't want to use PNG's you can also use a sprite and alter the background position. A sprite is one large image with a collection of smaller images which can be used as a background image by changing the background position. So for eg, if your original circle image with the white background is 100px X 100px, you can increase the height of the image to 100px X 200px, so that the top half is the original image with the white background, while the lower half is the new image with the blue background. Then you set setup your CSS as:

<pre><code>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;
}
</code></pre>

blocks|key|442075|text|好的，试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|442076|获取带有透明圆圈的图像-+http://i39.tinypic.com/15s97vd.png将该图像放入一个html元素中，并通过css更改该元素的背景颜色。这样，您就可以获得带有在样式表中定义的颜色的圆圈的徽标。|offset|length|442077|这个html|442078|<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>|code-block|syntax|javascript|442079|css|442080|div.badassColorChangingLogo{
++++background-color:white;
}
div.badassColorChangingLogo:hover{
++++background-color:blue;
}|442081|请记住，这在ie6和ie7等非alpha浏览器上是行不通的。对于ie，你可以使用js修复。Google+ddbelated+png修复，你可以得到脚本。|442082|entityMap|0|LINK|mutability|MUTABLE|url|http://i39.tinypic.com/15s97vd.png^0|0|D|Y|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@$D|12|E|13|1|14]]|A|$]]|$1|F|3|G|5|6|7|15|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|16|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|18|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|19|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

Ok, try this:

Get the image with the transparent circle - <a href="http://i39.tinypic.com/15s97vd.png" rel="nofollow">http://i39.tinypic.com/15s97vd.png</a>
Put that image in a html element and change that element's background color via css. This way you get the logo with the circle in the color defined in the stylesheet.

The html

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

The css

<pre><code>div.badassColorChangingLogo{
 background-color:white;
}
div.badassColorChangingLogo:hover{
 background-color:blue;
}
</code></pre>

Keep in mind that this wont work on non-alpha capable browsers like ie6, and ie7. for ie you can use a js fix. Google ddbelated png fix and you can get the script.

blocks|key|1461366|text|有点晚了，但我偶然发现了这篇文章。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1461367|它不是完美的，但这是我要做的。|1461368|HTML代码|1461369|<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>|code-block|syntax|javascript|1461370|CSS代码|1461371|.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;
}|1461372|现在，我的20px边界半径与图像边界半径完全匹配。正如您所看到的，.showcase-menu具有与.showcase-menu-social相同的背景。这样做是为了让“不透明度”生效，并且没有“方形”背景或边框显示，因此图像在悬停时略微降低了饱和度。|1461373|这是一个很好的效果，确实给了观众反馈，图像是对焦的。我相当确定在较暗的背景下，它会有更好的效果。|1461374|好消息是，这是有效的HTML-CSS代码，可以进行验证。说实话，它在非图像元素上的效果应该和图像一样好。|1461375|享受吧！|1461376|entityMap^0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Z|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|11|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|12|8|@]|9|@]|A|$]]|$1|M|3|N|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|O|3|P|5|6|7|14|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|15|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|16|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|17|8|@]|9|@]|A|$]]|$1|W|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|X|$]]

It's a bit late but I came across this post.

It's not perfect but here's what I do.

HTML Code

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

CSS Code

<pre><code>.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;
}
</code></pre>

Now my border radius of 20px matches up exactly with the image border radius. As you can see the .showcase-menu has the same background as the .showcase-menu-social. What this does is to allow the 'opacity' to take effect and no 'square' background or border shows, thus the image slightly reduces it's saturation on hover.

It's a nice effect and does give the viewer the feedback that the image is in focus. I'm fairly sure on a darker background, it would have even a better effect.

The nice thing is that this is valid HTML-CSS code and will validate. To be honest, it should work on non-image elements just as good as images.

Enjoy!

blocks|key|418472|text|在CSS中使用background-color属性，而不要使用background属性。因此，您的代码将如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|418473|.fb-icon:hover+{|offset|length|style|CODE|418474|+`background:+blue;`|code-block|syntax|javascript|418475|}|418476|entityMap^0|0|0|G|0|0|0|1|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|R|8|@$D|S|E|T|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|U|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|V|8|@$D|W|E|X|F|G]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|P|$]]

Use the background-color property instead of the background property in your CSS.
So your code will look like this: 
<code>
.fb-icon:hover {</code> <code>
 background: blue;</code> <code>
}
</code>

blocks|key|418518|text|另一种解决方案是使用新的CSS遮罩图像功能，该功能可以在除IE以外的所有应用程序中运行(IE11仍然不支持)。这将比这里建议的其他一些解决方案更具通用性和可维护性。您还可以更一般地使用SVG。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|418519|item+{+mask:+url('/mask-image.png');+}|code-block|syntax|javascript|418520|这里有一个使用蒙版图像的示例：|418521|http://codepen.io/zerostyle/pen/tHimv|418522|这里有很多例子：|418523|http://codepen.io/yoksel/full/fsdbu/|418524|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|S|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|U|8|@]|9|@]|A|$]]|$1|M|3|N|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|O|3|-4|5|6|7|W|8|@]|9|@]|A|$]]]|P|$]]

An alternative solution would be to use the new CSS mask image functionality which works in everything apart from IE (still not supported in IE11). This would be more versatile and maintainable than some of the other solutions suggested here. You could also more generally use SVG. 
e.g.

<pre><code>item { mask: url('/mask-image.png'); }
</code></pre>

There is an example of using a mask image here:

<pre><code>http://codepen.io/zerostyle/pen/tHimv
</code></pre>

and lots of examples here:

<pre><code>http://codepen.io/yoksel/full/fsdbu/
</code></pre>

blocks|key|441124|text|如果图标来自Font+Awesome+(https://fontawesome.com/icons/)，那么你可以点击color+css属性来改变它的背景。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|441125|fb-icon{
color:none;
}

fb-icon:hover{
color:#0000ff;
}|code-block|syntax|javascript|441126|这与它的颜色无关。因此，您可以在通常状态下使用完全不同的颜色，并在其活动状态下定义另一种颜色。|441127|entityMap|0|LINK|mutability|MUTABLE|url|https://fontawesome.com/icons/^0|K|U|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

If the icon is from Font Awesome (<a href="https://fontawesome.com/icons/" rel="nofollow noreferrer">https://fontawesome.com/icons/</a>)
then you could tap into the color css property to change it's background.

<pre><code>fb-icon{
color:none;
}

fb-icon:hover{
color:#0000ff;
}
</code></pre>

This is irrespective of the color it had. So you could use an entirely different color in its usual state and define another in its active state.

blocks|key|442189|text|最好的方法是使用svg图像，其中背景是白色矩形，前景是圆形，并将hover属性设置为bg。这是一个矢量图形图像，所以它在任何尺寸的屏幕上看起来都很好，更不用说svg是用在web上的。这个svg应该只有几个字节，并且它的渲染效果比任何光栅或位图图像都要好。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|442190|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

The best approach is to use a svg image in which the background would be a white rect and the foreground the circle, and set the hover property to the bg. It's a vector graphic image so it will look fine on any screen size, not to mention that svg is meant to be used in the web. This svg should be just of some bytes and its rendered better than any raster or bitmap image.

I need to change the background color of an image. The image is a circle image with white background, I need when you hover over it change the background of the circle image to blue. I need only the circle to be change.

My HTML code is

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

In CSS I wrote:

<pre><code>.fb-icon:hover {
 background: blue;
}
</code></pre>

The above code gives me blue color but as a frame around the circle icon. what I need is to change the background of the circle itself. Imagine it's like a signal it's white when you hover by mouse it goes to blue. 

Please I need a solution if it can be done by CSS or whatever. Sorry if I make it too long.

The problem: <a href="http://tinypic.com/view.php?pic=2u9h5jd&amp;s=5" rel="noreferrer">link</a>

How to change the color of an image on hover

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我需要更改图像的背景颜色。图像是一个白色背景的圆形图像，我需要当您将鼠标悬停在它上面时，将圆形图像的背景更改为蓝色。我只需要改变圆圈。我的HTML代码是<div class="fb-icon"><a href="http://www.facebook.com/mypage" target="_blank"><img s...

问如何在悬停时更改图像的颜色
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在悬停时更改图像的颜色EN