通过 CSS 更改 PNG 图像的颜色？

Question

提问by Wesley

Given a transparent PNG displaying a simple shape in white, is it possible to somehow change the color of this through CSS? Some kind of overlay or what not?

给定一个透明的 PNG 显示一个简单的白色形状，是否可以通过 CSS 以某种方式改变它的颜色？某种覆盖或什么不是？

Answer 1

回答by РАВИ

You can use filters with -webkit-filterand filter: Filters are relatively new to browsers but supported in over 90% of browsers according to the following CanIUse table: https://caniuse.com/#feat=css-filters

您可以将过滤器与-webkit-filter和一起使用filter：过滤器对于浏览器来说相对较新，但根据以下 CanIUse 表，超过 90% 的浏览器都支持过滤器：https://caniuse.com/#feat=css-filters

You can change an image to grayscale, sepia and lot more (look at the example).

您可以将图像更改为灰度、棕褐色等（查看示例）。

So you can now change the color of a PNG file with filters.

因此，您现在可以使用过滤器更改 PNG 文件的颜色。

body {
    background-color:#03030a;
    min-width: 800px;
    min-height: 400px
}
img {
    width:20%;
    float:left; 
     margin:0;
}
/*Filter styles*/
.saturate { filter: saturate(3); }
.grayscale { filter: grayscale(100%); }
.contrast { filter: contrast(160%); }
.brightness { filter: brightness(0.25); }
.blur { filter: blur(3px); }
.invert { filter: invert(100%); }
.sepia { filter: sepia(100%); }
.huerotate { filter: hue-rotate(180deg); }
.rss.opacity { filter: opacity(50%); }

<!--- img src http://upload.wikimedia.org/wikipedia/commons/thumb/e/ec/Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg/500px-Mona_Lisa%2C_by_Leonardo_da_Vinci%2C_from_C2RMF_retouched.jpg -->
<img alt="Mona Lisa" src="https://www.pexels.com/photo/photo-of-a-green-leaf-2563743/?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="original">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="saturate" class="saturate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="contrast" class="contrast">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="brightness" class="brightness">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="blur" class="blur">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="invert" class="invert">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="sepia" class="sepia">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="https://images.pexels.com/photos/40997/mona-lisa-leonardo-da-vinci-la-gioconda-oil-painting-40997.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260" title="opacity" class="rss opacity">

_Source

_来源

Answer 2

回答by Fadi Abo Msalam

I found this great codepen example that you insert your hex colorvalue and it returns the needed filter to apply this color to png

我发现了这个很棒的 codepen 示例，您可以插入十六进制颜色值并返回所需的过滤器以将此颜色应用于 png

CSS filter generator to convert from black to target hex color

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

for example i needed my png to have the following color #1a9790

例如，我需要我的 png 具有以下颜色#1a9790

then you have to apply the following filter to you png

那么你必须对你的 png 应用以下过滤器

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

Answer 3

回答by Jules Colle

You might want to take a look at Icon fonts. http://css-tricks.com/examples/IconFont/

您可能想看看图标字体。http://css-tricks.com/examples/IconFont/

EDIT: I'm using Font-Awesomeon my latest project. You can even bootstrap it. Simply put this in your <head>:

编辑：我在我的最新项目中使用了Font-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">

And then go ahead and add some icon-links like this:

然后继续添加一些像这样的图标链接：

<a class="icon-thumbs-up"></a>

Here's the full cheat sheet

这是完整的备忘单

--edit--

- 编辑 -

Font-Awesome uses different class names in the new version, probably because this makes the CSS files drastically smaller, and to avoid ambiguous css classes. So now you should use:

Font-Awesome 在新版本中使用了不同的类名，可能是因为这使得 CSS 文件变得更小，并且避免了歧义的 css 类。所以现在你应该使用：

<a class="fa fa-thumbs-up"></a>

EDIT 2:

编辑2：

Just found out github also uses its own icon font: OcticonsIt's free to download. They also have some tips on how to create your very own icon fonts.

刚发现github也用了自己的图标字体：Octicons可以免费下载。他们还有一些关于如何创建您自己的图标字体的提示。

Answer 4

回答by Vasan Jiaramaneetwesin

I've been able to do this using SVG filter. You can write a filter that multiplies the color of source image with the color you want to change to. In the code snippet below, flood-coloris the color we want to change image color to (which is Red in this case.) feComposite tells the filter how we're processing the color. The formula for feComposite with arithmetic is (k1*i1*i2 + k2*i1 + k3*i2 + k4) where i1 and i2 are input colors for in/in2 accordingly. So specifying only k1=1 means it will do just i1*i2, which means multiplying both input colors together.

我已经能够使用 SVG 过滤器做到这一点。您可以编写一个过滤器，将源图像的颜色与要更改的颜色相乘。在下面的代码片段中，flood-color是我们想要将图像颜色更改为的颜色（在本例中为红色）。feComposite 告诉过滤器我们如何处理颜色。带有算术的 feComposite 的公式是 (k1*i1*i2 + k2*i1 + k3*i2 + k4) 其中 i1 和 i2 是相应的 in/in2 输入颜色。所以只指定 k1=1 意味着它只会做 i1*i2，这意味着将两种输入颜色相乘。

Note: This only works with HTML5 since this is using inline SVG. But I think you might be able to make this work with older browser by putting SVG in a separate file. I haven't tried that approach yet.

注意：这仅适用于 HTML5，因为它使用的是内联 SVG。但是我认为您可以通过将 SVG 放在一个单独的文件中来使用旧版浏览器来完成这项工作。我还没有尝试过这种方法。

Here's the snippet:

这是片段：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask1">
      <feFlood flood-color="#ff0000" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask2">
      <feFlood flood-color="#00ff00" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left">
  <defs>
    <filter id="colorMask3">
      <feFlood flood-color="#0000ff" result="flood" />
      <feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" />
    </filter>
  </defs>
  <image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" />
</svg>

Answer 5

回答by Kirill G

The img tag has a background property just like any other. If you have a white PNG with a transparent shape, like a stencil, then you can do this:

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

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

Answer 6

回答by benhowdle89

Yes :)

是的：）

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)

Surfin' Safari - 博客存档？CSS 蒙版
WebKit 现在支持 CSS 中的 alpha 掩码。遮罩允许您使用图案覆盖框的内容，该图案可用于在最终显示中剔除该框的部分。换句话说，您可以根据图像的 alpha 剪裁成复杂的形状。
[...]
我们引入了新属性，为 Web 设计人员提供对这些掩码及其应用方式的大量控制。新属性类似于已经存在的背景和边框图像属性。
-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)

Answer 7

回答by John Slegers

In most browsers, you can use filters :

在大多数浏览器中，您可以使用过滤器：

on both <img>elements and background images of other elements
and set them either statically in your CSS, or dynamically using JavaScript

在<img>元素和其他元素的背景图像上
并在您的 CSS 中静态设置它们，或使用 JavaScript 动态设置它们

See demos below.

请参阅下面的演示。

`<img>`elements

`<img>`元素

You can apply this technique to a <img>element :

您可以将此技术应用于<img>元素：

#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<img id="original" src="http://i.stack.imgur.com/rfar2.jpg" />

<img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" />

Background images

背景图片

You can apply this technique to a background image :

您可以将此技术应用于背景图像：

#original, #changed {
    background: url('http://i.stack.imgur.com/kaKzj.jpg');
    background-size: cover;
    width: 30%;
    margin: 0 10% 0 10%;
    padding-bottom: 28%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}

<div id="original"></div>

<div id="changed"></div>

JavaScript

You can use JavaScript to set a filter at runtime :

您可以使用 JavaScript 在运行时设置过滤器：

var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;

#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}

<div id="original"></div>

<div id="changed"></div>

Answer 8

回答by chrscblls

Think I have a solution for this that's a) exactly what you were looking for 5 years ago, and b) is a bit simpler than the other code options here.

认为我有一个解决方案，a) 正是您 5 年前所寻找的，b) 比此处的其他代码选项简单一些。

With any white png (eg, white icon on transparent background), you can add an ::after selector to recolor.

对于任何白色 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 */
}

See this codepen (applying the color swap on hover): http://codepen.io/chrscblls/pen/bwAXZO

请参阅此代码笔（在悬停时应用颜色交换）：http://codepen.io/chrscblls/pen/bwAXZO

Answer 9

回答by Rehmat

The simplest one line that worked for me:

对我有用的最简单的一行：

filter: opacity(0.5) drop-shadow(0 0 0 blue);

You can adjust opacity from 0 to 1 to make color lighter or darker.

您可以在 0 到 1 之间调整不透明度，使颜色更亮或更暗。

Answer 10

回答by Muthukumar Anbalagan

I found this while googling, I found best working for me...

我在谷歌搜索时发现了这个，我发现最适合我......

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/

通过 CSS 更改 PNG 图像的颜色？

提问by Wesley

回答by РАВИ

回答by Fadi Abo Msalam

回答by Jules Colle

回答by Vasan Jiaramaneetwesin

回答by Kirill G

回答by benhowdle89

Surfin' Safari - Blog Archive ? CSS Masks

Surfin' Safari - 博客存档？CSS 蒙版

回答by John Slegers

`<img>`elements

`<img>`元素

Background images

背景图片

JavaScript

JavaScript

回答by chrscblls

回答by Rehmat

回答by Muthukumar Anbalagan

相关推荐

最近更新

标签

通过 CSS 更改 PNG 图像的颜色？

提问by Wesley

回答by РАВИ

回答by Fadi Abo Msalam

回答by Jules Colle

回答by Vasan Jiaramaneetwesin

回答by Kirill G

回答by benhowdle89

Surfin' Safari - Blog Archive ? CSS Masks

Surfin' Safari - 博客存档？CSS 蒙版

回答by John Slegers

<img>elements

<img>元素

Background images

背景图片

JavaScript

JavaScript

回答by chrscblls

回答by Rehmat

回答by Muthukumar Anbalagan

相关推荐

CSS 坐在背景后面的 Bootstrap Modal

将 SVG 指定为背景图像并在 CSS 中设置 SVG 样式？

CSS 如何将 flex-container 设置为其 flex-items 的宽度？

CSS 具有线性渐变的css过渡

相关推荐

最近更新

标签

`<img>`elements

`<img>`元素