通过CSS更改PNG图像的颜色？-Java 学习之路

347

鉴于透明的PNG显示白色的简单形状，是否有可能以某种方式通过CSS改变颜色？某种叠加或什么不是？

14 回答

437

您可以使用 -webkit-filter 和 filter 过滤器：过滤器对于浏览器来说是非常新的，并且仅在非常现代的浏览器中受支持 . 您可以将图像更改为灰度，棕褐色等等（请查看示例） .

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="http://i.stack.imgur.com/OyP0g.jpg" title="original">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="saturate" class="saturate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="grayscale" class="grayscale">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="contrast" class="contrast">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="brightness" class="brightness">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="blur" class="blur">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="invert" class="invert">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="sepia" class="sepia">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="huerotate" class="huerotate">
<img alt="Mona Lisa" src="http://i.stack.imgur.com/OyP0g.jpg" title="opacity" class="rss opacity">

资源

回复于 2024-04-29T09:59:32+08:00

0
您可能想看看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">


<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也使用自己的图标字体：Octicons可以免费下载 . 他们在how to create your very own icon fonts上也有一些提示 .
回复于 2024-04-29T09:59:32+08:00
20
img标签具有与其他任何一样的背景属性 . 如果你有一个透明形状的白色PNG，比如模板，那么你可以这样做：
```
<img src= 'stencil.png' style= 'background-color: red'>
```
回复于 2024-04-29T09:59:32+08:00
3

是的:)

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

回复于 2024-04-29T09:59:32+08:00

我已经能够使用SVG过滤器做到这一点 . 您可以编写一个过滤器，将源图像的颜色与要更改的颜色相乘 . 在下面的代码片段中， flood-color 是我们想要将图像颜色更改为的颜色（在这种情况下为红色 . ）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>

回复于 2024-04-29T09:59:32+08:00

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

回复于 2024-04-29T09:59:32+08:00

认为我有一个解决方案，这是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 */
}

看到这个codepen（在悬停时应用颜色交换）：http://codepen.io/chrscblls/pen/bwAXZO

回复于 2024-04-29T09:59:32+08:00

1
我找到了这个很棒的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%);
```
回复于 2024-04-29T09:59:32+08:00
6
我需要一种特定的颜色，所以过滤器对我不起作用 .

相反，我创建了一个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>
```
回复于 2024-04-29T09:59:32+08:00
3

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

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

请注意，在示例中，我使用 :hover 来说明行为;如果你只想改变"normal"状态的颜色，你应该删除伪类 .

回复于 2024-04-29T09:59:32+08:00
13
回答是因为我正在为此寻找解决方案 .

如果你有白色或黑色背景，那么@chrscblls中的笔答案效果很好，但我的不是 . Aslo，图像是用ng-repeat生成的，所以我不能在我的CSS中使用它们的ur并且你不能在img标签上使用:: after .

所以，我想到了一个工作，并认为如果他们在这里绊倒它可能会帮助人们 .

所以我所做的几乎完全相同，有三个主要区别：
- url在我的img标签中，我把它（和一个标签）放在另一个div上，其中:: after将起作用 .
- 'mix-blend-mode'设置为'difference'而不是'multiply'或'screen' .
- 我添加了一个::之前具有完全相同的值，因此:: after将执行:: before之前'difference'的'difference'并取消它自己 .
要将其从黑色更改为白色或从白色更改为黑色，背景颜色必须为白色 . 从黑色到颜色，您可以选择任何颜色 . 从白色到颜色，你需要选择你想要的颜色 .
```
.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
回复于 2024-04-29T09:59:32+08:00

我在谷歌搜索时发现了这一点，我觉得最适合我...

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/

回复于 2024-04-29T09:59:32+08:00

3
最简单的一行对我有用：
```
filter: opacity(0.5) drop-shadow(0 0 0 blue);
```
您可以将不透明度从0调整为1，以使颜色更亮或更暗 .
回复于 2024-04-29T09:59:32+08:00
55
要从字面上改变颜色，你可以使用-webkit-filter合并一个CSS转换，当发生某些事情时你会调用你选择的-webkit-filter . 例如：
```
img {
    -webkit-filter:grayscale(0%);
    transition: -webkit-filter .3s linear;
    }
img:hover 
    {
    -webkit-filter:grayscale(75%);
    }
```
回复于 2024-04-29T09:59:32+08:00

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

14 回答

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

<img>元素

背景图片

JavaScript

相关问题

`<img>` 元素和其他元素的背景图像