通过CSS改变PNG图像的颜色?

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

当前回答

对我来说有效的解决方案是使用滤镜:投影

滤镜:水滴阴影的工作方式不同于常规的盒子阴影。

滤镜将阴影应用于真实形状(因此它支持透明图像)。

现在的技巧是“隐藏”真实的图像，只显示阴影。

https://jsfiddle.net/d4m8x0qb/2

请注意，我的用例是将图标的颜色修改为一种纯色，所以这种方法适合我，但可能不适用于其他用例

2021-12-13 09:23:47

其他回答

试试这个:

 -webkit-filter: brightness(0) invert(1);
 filter: brightness(0) invert(1);

2021-04-29 02:37:23

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

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/

2018-10-10 20:12:36

/* 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%);

2022-06-28 01:37:11

当将一张图片从黑到白，或从白到黑时，色调旋转滤镜不起作用，因为黑色和白色在技术上不是颜色。相反，黑白颜色的变化(从黑到白或反之)必须使用invert filter属性来完成。

.img1 { 过滤器:反转(100%); ｝

2020-04-26 00:24:09

你可能想看看图标字体。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 它可以免费下载。他们还提供了一些关于如何创建自己的图标字体的技巧。

2012-11-13 08:15:24

通过CSS改变PNG图像的颜色?

推荐文章

最新文章

标签