给定一个透明的PNG显示一个简单的形状在白色，它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
对我来说有效的解决方案是使用滤镜:投影
滤镜:水滴阴影的工作方式不同于常规的盒子阴影。
滤镜将阴影应用于真实形状(因此它支持透明图像)。
现在的技巧是“隐藏”真实的图像，只显示阴影。
https://jsfiddle.net/d4m8x0qb/2
请注意，我的用例是将图标的颜色修改为一种纯色，所以这种方法适合我，但可能不适用于其他用例
其他回答
你可能想看看图标字体。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 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。
img标签有一个和其他标签一样的background属性。如果你有一个透明形状的白色PNG，就像一个模板，那么你可以这样做:
<img src= 'stencil.png' style= 'background-color: red'>
试试这个:
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
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
我想我有一个解决方案，这是a)正是你在5年前寻找的，b)比这里的其他代码选项更简单一点。
对于任何白色png(例如，透明背景上的白色图标)，您可以添加::after选择器来重新上色。
.icon {
background: url(img/icon.png); /* Your icon */
position: relative; /* Allows an absolute positioned psuedo element */
}
.icon::after{
position: absolute; /* Positions psuedo element relative to .icon */
width: 100%; /* Same dimensions as .icon */
height: 100%;
content: ""; /* Allows psuedo element to show */
background: #EC008C; /* The color you want the icon to change to */
mix-blend-mode: multiply; /* Only apply color on top of white, use screen if icon is black */
}
查看代码依赖(在悬停上应用颜色交换):http://codepen.io/chrscblls/pen/bwAXZO
