给定一个透明的PNG显示一个简单的形状在白色，它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
你可能想看看图标字体。http://css-tricks.com/examples/IconFont/
编辑:我在我的最新项目中使用字体- awesome。你甚至可以引导它。简单地把这个放在你的<head>:
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet">
<!-- And if you want to support IE7, add this aswell -->
<link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet">
然后继续添加一些像这样的图标链接:
<a class="icon-thumbs-up"></a>
这里是完整的小抄
——编辑
Font-Awesome在新版本中使用了不同的类名，可能是因为这使得CSS文件大大变小，并避免了模棱两可的CSS类。 所以现在你应该使用:
<a class="fa fa-thumbs-up"></a>
编辑2:
刚刚发现github也使用自己的图标字体:Octicons 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。
其他回答
试试这个:
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
如果你只需要一个图标，就不需要整个字体集，而且我觉得它作为一个单独的元素更“干净”。因此，出于这个目的，在HTML5中可以直接在文档流中放置SVG。然后你可以在你的.CSS样式表中定义一个类，并使用fill属性访问它的背景色:
工作小提琴: http://jsfiddle.net/qmsj0ez1/
请注意，在示例中，我使用:hover来说明行为;如果您只是想更改“正常”状态的颜色，则应该删除伪类。
为了字面上改变颜色，你可以使用-webkit-filter来合并CSS转换，当有事情发生时，你可以调用你选择的-webkit-filter。例如:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
body{ background: #333 url(/images/classy_fabric.png); width: 430px; margin: 0 auto; padding: 30px; } .preview{ background: #ccc; width: 415px; height: 430px; border: solid 10px #fff; } input[type='radio'] { -webkit-appearance: none; -moz-appearance: none; width: 25px; height: 25px; margin: 5px 0 5px 5px; background-size: 225px 70px; position: relative; float: left; display: inline; top: 0; border-radius: 3px; z-index: 99999; cursor: pointer; box-shadow: 1px 1px 1px #000; } input[type='radio']:hover{ -webkit-filter: opacity(.4); filter: opacity(.4); } .red{ background: red; } .red:checked{ background: linear-gradient(brown, red) } .green{ background: green; } .green:checked{ background: linear-gradient(green, lime); } .yellow{ background: yellow; } .yellow:checked{ background: linear-gradient(orange, yellow); } .purple{ background: purple; } .pink{ background: pink; } .purple:checked{ background: linear-gradient(purple, violet); } .red:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 red); filter: opacity(.5) drop-shadow(0 0 0 red); } .green:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 green); filter: opacity(.5) drop-shadow(0 0 0 green); } .yellow:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow); filter: opacity(.5) drop-shadow(0 0 0 yellow); } .purple:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple); filter: opacity(.5) drop-shadow(0 0 0 purple); } .pink:checked ~ img{ -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink); filter: opacity(.5) drop-shadow(0 0 0 pink); } img{ width: 394px; height: 375px; position: relative; } .label{ width: 150px; height: 75px; position: absolute; top: 170px; margin-left: 130px; } ::selection{ background: #000; } <div class="preview"> <input class='red' name='color' type='radio' /> <input class='green' name='color' type='radio' /> <input class='pink' name='color' type='radio' /> <input checked class='yellow' name='color' type='radio' /> <input class='purple' name='color' type='radio' /> <img src="https://i.stack.imgur.com/bd7VJ.png"/> </div>
来源:https://codepen.io/taryaoui/pen/EKkcu
/* change image color to white */
filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);
/* change image color to red */`
filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);
/* change image color to green */
filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);
/* change image color to blue */
filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);
