jQuery 如何使用 CSS 更改图标图像的颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20767322/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I change color of icon image using CSS?
提问by user1632018
I am trying to figure out how to change the color of an image that is half transparent and half solid color.
我想弄清楚如何更改半透明半纯色图像的颜色。
I want to be able to change the color of the white so I can add a hover, and add the ability to have a dynamic way to change the colors in wordpress. Using photoshop to fill the image isn't an option because I am going to build a color changer in to my Wordpress theme.
我希望能够更改白色的颜色，以便我可以添加悬停，并添加以动态方式更改 wordpress 颜色的能力。使用 photoshop 填充图像不是一种选择，因为我将在我的 Wordpress 主题中构建一个颜色转换器。
I used a jQuery script called JFlat.js, because it seemed like EXACTLY what I needed. Although it doesn't seem to work at all for me. Following the exact steps I am guessing it is because it uses an old version of jQuery.
我使用了一个名为 JFlat.js 的 jQuery 脚本，因为它看起来正是我所需要的。虽然它对我来说似乎根本不起作用。按照确切的步骤，我猜是因为它使用了旧版本的 jQuery。
Can anyone offer me some assistance?
谁能给我一些帮助？
Here is a black version on the image, you can't see the white one so I will post this one for a better of idea of what I am talking about.
这是图像上的黑色版本，您看不到白色版本，因此我将发布此版本以更好地了解我在说什么。
回答by Zach Saucier
Use an SVG icon, this one comes from Iconic. Icon melonis also good
Otherwise you could use a font-icon, this one comes from FontAwesome
否则你可以使用font-icon，这个来自FontAwesome
If you must, you can use a CSS Filterbut it is only supported in newer browsers. The best fallback would be to use SVG filter to do the same thing and use a data URL to apply it. Demo
如果必须，您可以使用CSS 过滤器，但它仅在较新的浏览器中受支持。最好的回退是使用 SVG 过滤器来做同样的事情并使用数据 URL 来应用它。演示
-webkit-filter: invert(100%);
You could also use a sprite like agconti suggested
你也可以使用像 agconti 建议的精灵
回答by Danield
For what it's worth, this can also be done with svg
对于它的价值，这也可以用 svg 来完成
Check out google's online svg-editor- which I used to produce the svg. (except for the css classes which I added later on)
查看谷歌的在线 svg-editor- 我用来制作 svg。（除了我稍后添加的 css 类）
svg
svg
<svg class="play" width="252" height="252" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<circle class="outer" r="123.16656" cy="128" cx="128" 0 fill="#000000"/>
<circle class="inner" r="97" cy="127" cx="128" fill="#ffffff"/>
<path class="triangle" transform="rotate(89.2704 134.893 125.778)" id="svg_6" d="m93.75,161.77814l41.14282,-72l41.14288,72l-82.28571,0z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" fill="#000000"/>
</g>
</svg>
css
css
.play:hover .outer, .play:hover .triangle
{
fill: #fff;
}
.play:hover .inner
{
fill: #000;
}
回答by BillyJMcDonald
You could try avoiding JQuery all together and use just plain old css and html. The code shows the concept, but you'll need to adjust the dimensions to make it work. You might find that using border-radius:100% more useful. Then you can apply :hover styles as necessary.
您可以尝试完全避免使用 JQuery，而只使用普通的旧 css 和 html。代码显示了这个概念，但您需要调整尺寸以使其工作。您可能会发现使用 border-radius:100% 更有用。然后您可以根据需要应用 :hover 样式。
<div class="outer-circle">
<div class="inner-circle">
<div class="triangle">
</div>
</div>
</div>
<style>
.outer-circle {
padding: 15px 0 0 15px;
width: 150px;
height: 150px;
background: black;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
}
.inner-circle {
width: 135px;
height: 135px;
background: white;
-moz-border-radius: 80px;
-webkit-border-radius: 80px;
border-radius: 80px;
position:relative;
}
.triangle {
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 80px solid black;
border-bottom: 40px solid transparent;
position: absolute;
top:25px;
left: 35px;
}
</style>
