给定一个透明的PNG显示一个简单的形状在白色,它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?


当前回答

使用这个很棒的codedeen示例,您插入十六进制颜色值,它返回所需的过滤器,将此颜色应用到png

CSS过滤器生成器转换从黑色到目标十六进制颜色

例如,我需要我的png颜色为#EF8C57

然后你必须对你的PNG应用下面的过滤器 结果:

filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);

其他回答

我找到了这个很棒的codedeen示例,您插入十六进制颜色值,它返回所需的过滤器,将此颜色应用到png

CSS过滤器生成器转换从黑色到目标十六进制颜色

例如,我需要PNG的颜色为#1a9790

然后你必须对你的PNG应用下面的过滤器

filter: invert(48%) sepia(13%) saturate(3207%) hue-rotate(130deg) brightness(95%) contrast(80%);

PS:代码依赖是基于这里的MultiplyByZer0的精彩回答:如何仅使用CSS过滤器将黑色转换为任何给定的颜色

所有功劳都归他:鼓掌:

我想我有一个解决方案,这是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

如果你只需要一个图标,就不需要整个字体集,而且我觉得它作为一个单独的元素更“干净”。因此,出于这个目的,在HTML5中可以直接在文档流中放置SVG。然后你可以在你的.CSS样式表中定义一个类,并使用fill属性访问它的背景色:

工作小提琴: http://jsfiddle.net/qmsj0ez1/

请注意,在示例中,我使用:hover来说明行为;如果您只是想更改“正常”状态的颜色,则应该删除伪类。

我在谷歌上找到了这个,我发现最适合我的工作…

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/

如果图像像矢量图像一样简单,可以转换为SVG并在那里进行CSS更改。 另一种选择是将图像制作成PNG,并将特定的颜色更改为透明(如裁剪),并使用CSS更改背景颜色。