给定一个透明的PNG显示一个简单的形状在白色，它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?
当前回答
我在谷歌上找到了这个，我发现最适合我的工作…
HTML
<div class="img"></div>
CSS
.img {
background-color: red;
width: 60px;
height: 60px;
-webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
http://jsfiddle.net/a63b0exm/
其他回答
回答是因为我在寻找解决办法。
如果你的背景是白色或黑色，@chrscblls回答中的钢笔效果很好，但我的不是。此外，这些图像是用ng-repeat生成的，所以我不能在我的css中有他们的url，而且你不能在img标签上使用::after。
所以，我想了一个变通的办法，如果人们在这里也跌倒了，我想它可能会帮助到他们。
所以我所做的几乎是一样的，只有三个主要区别:
url是在我的img标签，我把它(和一个标签)在另一个div::后将工作。 “混合-混合模式”设置为“差”，而不是“相乘”或“筛选”。 我用完全相同的值添加了一个::before，因此::after将执行::before所做的'difference'的'difference'，并取消它-self。
要改变它从黑色到白色或白色到黑色的背景颜色需要是白色。 从黑色到彩色，你可以选择任何颜色。 从白色到彩色，你需要选择你想要的颜色相反的颜色。
.divClass{
position: relative;
width: 100%;
height: 100%;
text-align: left;
}
.divClass:hover::after, .divClass:hover::before{
position: absolute;
width: 100%;
height: 100%;
background: #FFF;
mix-blend-mode: difference;
content: "";
}
https://codepen.io/spaceplant/pen/oZyMYG
因为我张贴了这个答案，我用不同的方法制作了另一支笔:
* { box-sizing: border-box; } body { background-color: CadetBlue; font-family: "Lato", sans-serif; text-align: center; } button { display: flex; justify-content: center; min-width: 182px; padding: 0.5em 1em; margin: 2em auto; cursor: pointer; pointer-events: auto; border-radius: 4px; border: none; background: #85b5b7; box-shadow: 0 6px #6fa8aa; } label { font-weight: 400; font-size: 24px; margin: auto 0; color: white; } .icon { height: 64px; width: 64px; background-color: white; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: left center; mask-position: left center; -webkit-mask-size: auto 48px; mask-size: auto 48px; mask-mode: luminance; -webkit-mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); mask-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/d/d1/Bubbles-alt-icon.png/640px-Bubbles-alt-icon.png"); } button label span { color: #395f60; } button:hover { color: #395f60; transform: translatey(4px); box-shadow: 0 2px #6fa8aa; } button:hover .icon { background-color: #395f60; } <button> <div class="icon"></div> <label> white to <span>color</span></label> </button>
是的:)
Surfin' Safari - Blog Archive » CSS Masks WebKit now supports alpha masks in CSS. Masks allow you to overlay the content of a box with a pattern that can be used to knock out portions of that box in the final display. In other words, you can clip to complex shapes based off the alpha of an image. [...] We have introduced new properties to provide Web designers with a lot of control over these masks and how they are applied. The new properties are analogous to the background and border-image properties that already exist. -webkit-mask (background) -webkit-mask-attachment (background-attachment) -webkit-mask-clip (background-clip) -webkit-mask-origin (background-origin) -webkit-mask-image (background-image) -webkit-mask-repeat (background-repeat) -webkit-mask-composite (background-composite) -webkit-mask-box-image (border-image)
img标签有一个和其他标签一样的background属性。如果你有一个透明形状的白色PNG，就像一个模板，那么你可以这样做:
<img src= 'stencil.png' style= 'background-color: red'>
你可能想看看图标字体。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来合并CSS转换，当有事情发生时，你可以调用你选择的-webkit-filter。例如:
img {
-webkit-filter:grayscale(0%);
transition: -webkit-filter .3s linear;
}
img:hover
{
-webkit-filter:grayscale(75%);
}
