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

Question

给定一个以白色显示简单形状的透明 PNG，是否可以通过 CSS 以某种方式更改其颜色？某种叠加还是什么？

Answer 1

回答是因为我正在为此寻找解决方案。

如果您有白色或黑色背景，@chrscblls 答案中的笔效果很好，但我的不是。此外，图像是用 ng-repeat 生成的，所以我的 css 中不能有它们的 url，你不能在 img 标签上使用 ::after。

所以，我想出了一个变通方法，并认为如果人们在这里绊倒，它可能会有所帮助。

所以我所做的与三个主要区别几乎相同：

• url 在我的 img 标签中，我将它（和一个标签）放在另一个 div 中， ::after 将在该 div 上工作。
• “mix-blend-mode”设置为“difference”而不是“multiply”或“screen”。
• 我添加了一个具有完全相同值的 ::before，因此 ::after 将完成 ::before 产生的“差异”的“差异”并自行取消。

要将其从黑色更改为白色或将白色更改为黑色，背景颜色需要为白色。 从黑色到彩色，您可以选择任何颜色。 从白色到彩色，您需要选择与您想要的颜色相反的颜色。

.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

---

自从我发布此答案后，我使用不同的方法制作了an other pen：

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

Answer 2

对我有用的解决方案是使用filter: drop-shadow

过滤器：投影的工作方式与常规 box-shadow 不同。

filter 将阴影应用于真实形状（因此它支持透明图像）。

现在的诀窍是“隐藏”真实图像并仅显示阴影。

https://jsfiddle.net/d4m8x0qb/2

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

Answer 3

使用这个伟大的 codepen 示例，您插入十六进制颜色值并返回所需的过滤器以将此颜色应用于 png

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

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

那么您必须将以下过滤器应用于您的 png 结果：

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

Answer 4

试试这个：

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

Answer 5

您可以使用带有-webkit-filter 和filter 的过滤器： 过滤器对浏览器来说相对较新，但根据以下 CanIUse 表，超过 90% 的浏览器都支持过滤器：https://caniuse.com/#feat=css-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://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="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 6

将图片从黑色变为白色或将白色变为黑色时，色调旋转滤镜不起作用，因为从技术上讲，黑色和白色不是颜色。相反，黑色和白色的颜色变化（从黑色到白色或反之亦然）必须使用反转过滤器属性来完成。

.img1 { filter: invert(100%); }

Answer 7

body{
  background: #333 url(/images/classy_fabric.png);
  width: 430px;
  margin: 0 auto;
  padding: 30px;
}
.preview{
  background: #ccc;
  width: 415px;
  height: 430px;
  border: solid 10px #fff;
}

input[type='radio'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 25px;
  height: 25px;
  margin: 5px 0 5px 5px;
  background-size: 225px 70px;
  position: relative;
  float: left;
  display: inline;
  top: 0;
  border-radius: 3px;
  z-index: 99999;
  cursor: pointer;
  box-shadow: 1px 1px 1px #000;
}

input[type='radio']:hover{
  -webkit-filter: opacity(.4);
  filter: opacity(.4);    
}

.red{
  background: red;
}

.red:checked{
  background: linear-gradient(brown, red)
}

.green{
  background: green;
}

.green:checked{
  background: linear-gradient(green, lime);
}

.yellow{
  background: yellow;
}

.yellow:checked{
  background: linear-gradient(orange, yellow);
}

.purple{
  background: purple;
}

.pink{
  background: pink;
}

.purple:checked{
  background: linear-gradient(purple, violet);
}

.red:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 red);
  filter: opacity(.5) drop-shadow(0 0 0 red);
}

.green:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 green);
  filter: opacity(.5) drop-shadow(0 0 0 green);
}

.yellow:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 yellow);
  filter: opacity(.5) drop-shadow(0 0 0 yellow);
}

.purple:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 purple);
  filter: opacity(.5) drop-shadow(0 0 0 purple);
}

.pink:checked ~ img{
  -webkit-filter: opacity(.5) drop-shadow(0 0 0 pink);
  filter: opacity(.5) drop-shadow(0 0 0 pink);
}


img{
  width: 394px;
  height: 375px;
  position: relative;
}

.label{
  width: 150px;
  height: 75px;
  position: absolute;
  top: 170px;
  margin-left: 130px;
}

::selection{
  background: #000;
}

<div class="preview">
  <input class='red' name='color' type='radio' />
  <input class='green' name='color' type='radio' />
    <input class='pink' name='color' type='radio' />
  <input checked class='yellow' name='color' type='radio' />
  <input class='purple' name='color' type='radio' />  
  <img src="https://i.stack.imgur.com/bd7VJ.png"/>
</div>

来源：https://codepen.io/taryaoui/pen/EKkcu

Answer 8

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

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

您可以将不透明度从 0 调整为 1，以使颜色更亮或更暗。

Answer 9

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

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/

Answer 10

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

CSS filter generator to convert from black to target hex color

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

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

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

Answer 11

我需要一种特定的颜色，所以过滤器不适合我。

相反，我创建了一个 div，利用 CSS 多个背景图像和线性渐变函数（它自己创建图像）。如果您使用叠加混合模式，您的实际图像将与生成的包含所需颜色的“渐变”图像混合（此处为#BADA55）

.colored-image {
        background-image: linear-gradient(to right, #BADA55, #BADA55), url("https://i.imgur.com/lYXT8R6.png");
        background-blend-mode: overlay;
        background-size: contain;
        width: 200px;
        height: 200px;        
    }

<div class="colored-image"></div>

Answer 12

认为我对此有一个解决方案，即 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

Answer 13

在most browsers，你可以使用过滤器：

• <img> 元素和其他元素的背景图片

• 在 CSS 中静态设置，或使用 JavaScript 动态设置

请参阅下面的演示。

---

<img>元素

您可以将此技术应用于<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" />

背景图片

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

#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

您可以在运行时使用 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 14

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

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

这是sn-p：

<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 15

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

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

然后继续添加一些图标链接，如下所示：

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

这是full cheat sheet

--编辑--

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

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

编辑 2：

刚发现github也用了自己的icon字体：Octicons 它可以免费下载。他们在how to create your very own icon fonts 上也有一些提示。

Answer 16

要真正改变颜色，您可以将 CSS 过渡与 -webkit-filter 结合在一起，当发生某些事情时，您将调用您选择的 -webkit-filter。例如：

img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }

Answer 17

是的:)

Surfin' Safari - Blog Archive » CSS Masks

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 18

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

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

请注意，在示例中，我使用了:hover 来说明行为；如果你只是想改变“正常”状态的颜色，你应该删除伪类。

Answer 19

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

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