如何使用CSS更改图标图像的颜色?
我想弄清楚如何更改半透明和半纯色的图像的颜色。
I am trying to figure out how to change the color of an image that is half transparent and half solid color.
我想要能够改变白色的颜色,所以我可以添加一个悬停,并添加一个动态的方式来改变wordpress的颜色的能力。使用photoshop填充图像是不是一个选项,因为我要建立一个换色器到我的Wordpress主题。
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.
我使用一个jQuery脚本名为JFlat.js ,因为它看起来像我需要的完全。虽然它似乎根本不工作对我来说。按照确切的步骤,我猜它是因为它使用旧版本的jQuery。
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.
任何人都可以给我一些帮助吗?
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.
使用 SVG图标 ,此图片来自 Iconic 。 图标瓜也很好
否则您可以使用字体图标,此图片来自 FontAwesome
Otherwise you could use a font-icon, this one comes from FontAwesome
如果必须,您可以使用 CSS过滤器,但它是仅在新版浏览器中支持。最好的回退是使用SVG过滤器做同样的事情,并使用数据URL来应用它。 演示
If you must, you can use a CSS Filter but 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
-webkit-filter: invert(100%);
您也可以使用agconti建议的sprite
You could also use a sprite like agconti suggested