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

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

2012-11-13 08:15:24

其他回答

img标签有一个和其他标签一样的background属性。如果你有一个透明形状的白色PNG，就像一个模板，那么你可以这样做:

<img src= 'stencil.png' style= 'background-color: red'>

2011-09-14 11:58:07

/* 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

是的:)

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)

2011-09-14 11:58:03

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

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

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

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

https://jsfiddle.net/d4m8x0qb/2

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

2021-12-13 09:23:47

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

2022-12-11 22:37:52

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

推荐文章

最新文章

标签