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

给定一个透明的PNG显示一个简单的形状在白色，它是有可能以某种方式改变这通过CSS的颜色?某种叠加还是什么?

1410534 次浏览
小开

是的:)

Surfin' Safari - Blog Archive»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)
小开

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

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

你可能想看看图标字体。# EYZ0

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

这是完整的小抄

——编辑

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

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

编辑2:

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

小开
最佳答案
你可以使用-webkit-filter和filter滤镜: 对于浏览器来说，过滤器相对较新，但根据下面的CanIUse表，超过90%的浏览器都支持过滤器

你可以将图像更改为灰度，深褐色和更多(请看示例)。

所以你现在可以用滤镜改变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">

< a href = " http://codepen。io / rss /钢笔/ ftnDd noreferrer“rel = > < / >来源

小开

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

< p >工作小提琴: # EYZ0 < / p >

注意，在这个例子中，我使用了# eyz0来说明行为;如果您只是想更改“正常”状态的颜色，则应该删除伪类。

小开

为了字面上改变颜色，你可以使用-webkit-filter来合并CSS转换，当有事情发生时，你可以调用你选择的-webkit-filter。例如:

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

我已经能够使用SVG过滤器做到这一点。您可以编写一个过滤器，将源图像的颜色与您想要更改的颜色相乘。在下面的代码片段中，flood-color是我们想要改变图像颜色的颜色(在本例中是红色)。fcomposite告诉过滤器我们如何处理颜色。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>

小开

在大多数浏览器<强> < / >强中，你可以使用过滤器:

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

  • 并在CSS中静态设置它们，或者使用JavaScript动态设置它们

请看下面的演示。

# EYZ0元素

你可以把这个技巧应用到<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>

小开

我想我有一个解决方案，这是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

小开

回答是因为我在寻找解决办法。

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

所以，我想了一个变通的办法，如果人们在这里也跌倒了，我想它可能会帮助到他们。

所以我所做的几乎是一样的，只有三个主要区别:

  • url是在我的img标签，我把它(和一个标签)在另一个div::后将工作。
  • “混合-混合模式”设置为“差”，而不是“相乘”或“筛选”。
  • 我用完全相同的值添加了一个::before，因此::after将执行::before所做的'difference'的'difference'，并取消它-self。

要将它从黑色改为白色或从白色改为黑色，背景颜色需要为白色。 从黑色到彩色，你可以选择任何颜色。 但是，从白色到彩色，你需要选择你想要的颜色相反的颜色 

.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: "";
}

< a href = " https://codepen。io/spaceplant/pen/oZyMYG" rel="nofollow noreferrer">https://codepen.io/spaceplant/pen/oZyMYG .

因为我发布了这个答案，我用不同的方法制作了另一支笔:

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

小开

我需要一个特定的颜色，所以滤镜不适合我。

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

小开

我发现了这个很棒的代码依赖的例子，你插入你的十六进制颜色值，它返回所需的过滤器，将这种颜色应用到png

< a href = " https://codepen。io/sosuke/pen/Pjoqqp" rel="noreferrer">CSS过滤器生成器转换从黑色到目标十六进制颜色

例如，我需要我的png颜色为# 1 a9790

然后你必须对你的PNG应用下面的过滤器

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

PS:代码依赖是基于MultiplyByZer0的精彩回答:如何转换黑色为任何给定的颜色只使用CSS过滤器

所有功劳都归他:鼓掌:

小开

我在谷歌上找到了这个，我发现最适合我的工作…

超文本标记语言

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

小开

最简单的一句话对我很管用:

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

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

小开 

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>

来源:# EYZ0

小开

当将一张图片从黑到白，或从白到黑时，色调旋转滤镜不起作用，因为黑色和白色在技术上不是颜色。相反，黑白颜色的变化(从黑到白或反之)必须使用invert filter属性来完成。

< p > <代码>。img1 { 过滤器:反转(100%); 代码}< / > < / p >
小开

试试这个:

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

使用这个很棒的codedeen示例，您插入十六进制颜色值，它返回所需的过滤器，将此颜色应用到png

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

例如，我需要我的png颜色为#EF8C57

那么你必须应用下面的过滤器到你的PNG 结果:< / p > 

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

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

滤镜:阴影效果不同于常规的box-shadow。

filter一个应用阴影的真实形状(所以它支持透明图像)。

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

https://jsfiddle.net/d4m8x0qb/2

enter image description here

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

小开 
/* 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%);
小开

您可以使用filter: hue-rotate(Ndeg)，但如果图像是黑白的，色调将永远不会改变。

但是，您可以将它与filter: sepia(100)结合使用。这将为hue-rotate滤镜可以改变的图像添加颜色。

Sepia增加了一个相当不饱和的颜色，所以用filter: saturate(50);来增强它，使它成为hue-rotate可以更好地工作的更深的颜色。

然后把它们组合在一起:

# EYZ0

然后尝试旋转的程度，直到你找到你喜欢的颜色。


提交答案