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

CSS

理查德村村小宇宙

2020-03-18

给定透明的PNG以白色显示简单形状，是否有可能通过CSS更改其颜色？某种覆盖还是什么？

第2192篇《通过CSS更改PNG图像的颜色？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答

逆天Near 2020.03.18

要从字面上更改颜色，可以将CSS过渡与-webkit-filter合并，在发生某些情况时，您将调用所选的-webkit-filter。例如：

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

GO猿 2020.03.18

我需要特定的颜色，因此滤镜对我不起作用。

相反，我创建了一个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>

梅番长 2020.03.18

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

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

请注意，在该示例中，我已经:hover说明了这种行为。如果您只想为“正常”状态更改颜色，则应删除伪类。

飞云Mandy 2020.03.18

认为我对此有一个解决方案，它是a）恰好是您五年前所寻找的，并且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

小哥GO 2020.03.18

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

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

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

逆天LLEY 2020.03.18

我已经能够使用SVG过滤器执行此操作。您可以编写一个滤镜，将源图像的颜色与要更改的颜色相乘。在下面的代码片段中，泛色是我们想要将图像颜色更改为的颜色（在这种情况下为红色）。feComposite告诉滤镜我们如何处理颜色。feComposite的算术公式为（k1 * i1 * i2 + k2 * i1 + k3 * i2 + k4）其中，i1和i2是in / in2的输入颜色。因此，仅指定k1 = 1意味着它将仅执行i1 * i2，这意味着将两种输入颜色相乘。

注意：这仅适用于HTML5，因为它使用了嵌入式SVG。但是我认为您可以通过将SVG放在单独的文件中，从而在较旧的浏览器上实现此功能。我还没有尝试过这种方法。

这是代码段：

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

伽罗Davaid 2020.03.18

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

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

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

那么您必须将以下过滤器应用于png

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

十三逆天 2020.03.18

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

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

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

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

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板

0 回答