blocks|key|2445586|text|是:)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445587|2445588|+Surfin'+Safari+-+Blog+Archive+»+CSS+Masks|blockquote|offset|length|2445589|2445590|WebKit现在支持在CSS中使用alpha蒙版。蒙版允许您使用图案覆盖框的内容，该图案可用于在最终显示中剔除该框的部分内容。换句话说，您可以根据图像的alpha剪裁到复杂的形状。|2445591|..。|2445592|我们引入了新的属性，为Web设计人员提供了对这些掩码及其应用方式的大量控制。新的属性类似于已经存在的背景和边框图像属性。|2445593|-webkit-mask+(背景)+-webkit-mask-attachment+(背景-附件)+-webkit-mask-clip+(背景-剪辑)-webkit-mask-border(背景-原点)+-webkit-mask-image+(背景-图像)+-webkit-mask-repeat+(背景-重复)+-webkit-mask-composite+(背景-复合)+-webkit-mask-box-image+(边框图像)|2445594|entityMap|0|LINK|mutability|MUTABLE|url|https://www.webkit.org/blog/181/css-masks/^0|0|0|1|15|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|10|8|@]|9|@$F|11|G|12|1|13]]|A|$]]|$1|H|3|-4|5|6|7|14|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|15|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|16|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|18|8|@]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|X]]]]

<p>Yes :)</p>
<blockquote>
<h3><a href="https://www.webkit.org/blog/181/css-masks/" rel="noreferrer">Surfin' Safari - Blog Archive » CSS Masks</a></h3>
<p>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.<br />
[...]<br />
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.</p>
<pre><code>-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)
</code></pre>
</blockquote>


blocks|key|2445611|text|img标记和其他任何标记一样，都有一个背景属性。如果你有一个透明形状的白色PNG，比如模具，那么你可以这样做：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445612|<img+src=+'stencil.png'+style=+'background-color:+red'>|code-block|syntax|javascript|2445613|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

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

<pre><code>&lt;img src= 'stencil.png' style= 'background-color: red'&gt;
</code></pre>


blocks|key|2445665|text|你可能想看看图标字体。http://css-tricks.com/examples/IconFont/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2445666|编辑:我在最新的项目中使用了Font-Awesome。您甚至可以对其进行引导。只需将此代码放入您的<head>|style|CODE|2445667|<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">|code-block|syntax|javascript|2445668|然后添加一些图标链接，如下所示：|2445669|<a+class="icon-thumbs-up"></a>|2445670|这是full+cheat+sheet|2445671|-编辑--|2445672|Font-Awesome在新版本中使用了不同的类名，可能是因为这使得CSS文件大大变小，并避免了多义性的css类。所以现在你应该使用：|2445673|<a+class="fa+fa-thumbs-up"></a>|2445674|编辑2：|2445675|刚刚发现github也使用了自己的图标字体：Octicons，可以免费下载。他们也有一些关于how+to+create+your+very+own+icon+fonts的小贴士。|2445676|entityMap|0|LINK|mutability|MUTABLE|url|http://css-tricks.com/examples/IconFont/|1|http://fortawesome.github.io/Font-Awesome/|2|http://fortawesome.github.io/Font-Awesome/cheatsheet/|3|https://octicons.github.com/|4|https://github.com/blog/1135-the-making-of-octicons^0|B|14|0|0|1D|6|E|C|1|0|0|0|0|2|G|2|0|0|0|0|0|M|8|3|1A|12|4|0^^$0|@$1|2|3|4|5|6|7|1I|8|@]|9|@$A|1J|B|1K|1|1L]]|C|$]]|$1|D|3|E|5|6|7|1M|8|@$A|1N|B|1O|F|G]]|9|@$A|1P|B|1Q|1|1R]]|C|$]]|$1|H|3|I|5|J|7|1S|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1T|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1U|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1V|8|@]|9|@$A|1W|B|1X|1|1Y]]|C|$]]|$1|S|3|T|5|6|7|1Z|8|@]|9|@]|C|$]]|$1|U|3|V|5|6|7|20|8|@]|9|@]|C|$]]|$1|W|3|X|5|J|7|21|8|@]|9|@]|C|$K|L]]|$1|Y|3|Z|5|6|7|22|8|@]|9|@]|C|$]]|$1|10|3|11|5|6|7|23|8|@]|9|@$A|24|B|25|1|26]|$A|27|B|28|1|29]]|C|$]]|$1|12|3|-4|5|6|7|2A|8|@]|9|@]|C|$]]]|13|$14|$5|15|16|17|C|$18|19]]|1A|$5|15|16|17|C|$18|1B]]|1C|$5|15|16|17|C|$18|1D]]|1E|$5|15|16|17|C|$18|1F]]|1G|$5|15|16|17|C|$18|1H]]]]

<p>You might want to take a look at Icon fonts. <a href="http://css-tricks.com/examples/IconFont/">http://css-tricks.com/examples/IconFont/</a></p>

<p>EDIT: I'm using <a href="http://fortawesome.github.io/Font-Awesome/">Font-Awesome</a> on my latest project. You can even bootstrap it. Simply put this in your <code>&lt;head&gt;</code>:</p>

<pre><code>&lt;link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css" rel="stylesheet"&gt;

&lt;!-- And if you want to support IE7, add this aswell --&gt;
&lt;link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome-ie7.min.css" rel="stylesheet"&gt;
</code></pre>

<p>And then go ahead and add some icon-links like this:</p>

<pre><code>&lt;a class="icon-thumbs-up"&gt;&lt;/a&gt;
</code></pre>

<p>Here's the <a href="http://fortawesome.github.io/Font-Awesome/cheatsheet/">full cheat sheet</a></p>

<p>--edit--</p>

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

<pre><code>&lt;a class="fa fa-thumbs-up"&gt;&lt;/a&gt;
</code></pre>

<p>EDIT 2:</p>

<p>Just found out github also uses its own icon font: <a href="https://octicons.github.com/">Octicons</a>
It's free to download. They also have some tips on <a href="https://github.com/blog/1135-the-making-of-octicons">how to create your very own icon fonts</a>.</p>


blocks|key|4061202|text|如果你只需要一个图标，那么就没有必要设置整个字体，而且我觉得作为一个单独的元素，它更“干净”。因此，在HTML5中，您可以将SVG直接放在文档流中。然后，您可以在.CSS样式表中定义一个类，并使用fill属性访问其背景颜色：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4061203|工作小提琴：http://jsfiddle.net/qmsj0ez1/|4061204|请注意，在示例中，我使用了:hover来说明行为；如果您只想更改“正常”状态的颜色，则应该删除伪类。|4061205|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/qmsj0ez1/^0|2Q|4|0|6|T|0|0|D|6|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|I|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

<p>There's no need for a whole font set if you only need one icon, plus I feel it being more "clean" as an individual element. So, for this purpose, in HTML5 you can place a SVG directly inside the document flow. Then you can define a class in your .CSS stylesheet and access its background color with the <code>fill</code> property:</p>

<p>Working fiddle:
<a href="http://jsfiddle.net/qmsj0ez1/" rel="nofollow">http://jsfiddle.net/qmsj0ez1/</a></p>

<p>Note that, in the example, I've used <code>:hover</code>to illustrate the behaviour; if you just want to change color for the "normal" state, you should remove the pseudoclass.</p>


blocks|key|4061264|text|要真正改变颜色，您可以将CSS转换与-webkit-filter结合在一起，当发生某些事情时，您可以调用您选择的-webkit-filter。例如：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4061265|img+{
++++-webkit-filter:grayscale(0%25);
++++transition:+-webkit-filter+.3s+linear;
++++}
img:hover+
++++{
++++-webkit-filter:grayscale(75%25);
++++}|code-block|syntax|javascript|4061266|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>To literally change the color, you could incorporate a CSS transition with a -webkit-filter where when something happens you would invoke the -webkit-filter of your choice. For example:</p>

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


blocks|key|2445798|text|我已经能够使用SVG过滤器做到这一点。您可以编写一个滤镜，将源图像的颜色与要更改为的颜色相乘。在下面的代码片段中，泛色是我们想要将图像颜色更改为的颜色(在本例中为红色。)feComposite告诉滤镜我们是如何处理颜色的。算术的feComposite的公式是(k1*+i1+*i2+%2B+k2*i1+%2B+k3*i2+%2B+k4)，其中i1和i2相应地是in/in2的输入颜色。因此，只指定k1=1意味着它将只执行i1*i2，这意味着将两个输入颜色相乘。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|2445799|注意:这只适用于HTML5，因为它使用的是内联SVG。但我认为，通过将SVG放在一个单独的文件中，您也许能够在较旧的浏览器上使用此功能。我还没有尝试过这种方法。|2445800|下面是代码片段：|2445801|<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%25"+height="100%25"+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%25"+height="100%25"+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%25"+height="100%25"+xlink:href="http://i.stack.imgur.com/OyP0g.jpg"+filter="url(#colorMask3)"+/>
</svg>|code-block|syntax|javascript|2445802|​|2445803|entityMap^0|1L|2|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|W|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|X|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|Y|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|R|$]]

<p>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, <strong>flood-color</strong> is 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.</p>

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

<p>Here's the snippet:
<div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left"&gt;
  &lt;defs&gt;
    &lt;filter id="colorMask1"&gt;
      &lt;feFlood flood-color="#ff0000" result="flood" /&gt;
      &lt;feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask1)" /&gt;
&lt;/svg&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left"&gt;
  &lt;defs&gt;
    &lt;filter id="colorMask2"&gt;
      &lt;feFlood flood-color="#00ff00" result="flood" /&gt;
      &lt;feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask2)" /&gt;
&lt;/svg&gt;
&lt;svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="60" height="90" style="float:left"&gt;
  &lt;defs&gt;
    &lt;filter id="colorMask3"&gt;
      &lt;feFlood flood-color="#0000ff" result="flood" /&gt;
      &lt;feComposite in="SourceGraphic" in2="flood" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /&gt;
    &lt;/filter&gt;
  &lt;/defs&gt;
  &lt;image width="100%" height="100%" xlink:href="http://i.stack.imgur.com/OyP0g.jpg" filter="url(#colorMask3)" /&gt;
&lt;/svg&gt;</code></pre>
</div>
</div>
</p>


blocks|key|4345919|text|在中，您可以使用过滤器：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4345920|在<img>元素和其他元素的背景图像上进行|offset|length|style|CODE|4345921|unordered-list-item|4345922|，并在CSS中静态设置它们，或使用JavaScript|4345923|动态设置它们。|4345924|请看下面的演示。|4345925|4345926|<img>元素|4345927|您可以将此技术应用于<img>元素：|4345928|​|4345929|#original,+#changed+{
++++width:+45%25;
++++padding:+2.5%25;
++++float:+left;
}

#changed+{
++++-webkit-filter+:+hue-rotate(180deg);
++++filter+:+hue-rotate(180deg);
}|code-block|syntax|javascript|4345930|<img+id="original"+src="http://i.stack.imgur.com/rfar2.jpg"+/>

<img+id="changed"+src="http://i.stack.imgur.com/rfar2.jpg"+/>|4345931|4345932|背景图片|4345933|您可以将此技术应用于背景图像：|4345934|4345935|#original,+#changed+{
++++background:+url('http://i.stack.imgur.com/kaKzj.jpg');
++++background-size:+cover;
++++width:+30%25;
++++margin:+0+10%25+0+10%25;
++++padding-bottom:+28%25;
++++float:+left;
}

#changed+{
++++-webkit-filter+:+hue-rotate(180deg);
++++filter+:+hue-rotate(180deg);
}|4345936|<div+id="original"></div>

<div+id="changed"></div>|4345937|4345938|JavaScript|4345939|您可以使用JavaScript在运行时设置过滤器：|4345940|4345941|var+element+=+document.getElementById("changed");
var+filter+=+'hue-rotate(120deg)+saturate(2.4)';
element.style['-webkit-filter']+=+filter;
element.style['filter']+=+filter;|4345942|#original,+#changed+{
++++margin:+0+10%25;
++++width:+30%25;
++++float:+left;
++++background:+url('http://i.stack.imgur.com/856IQ.png');
++++background-size:+cover;
++++padding-bottom:+25%25;
}|4345943|<div+id="original"></div>

<div+id="changed"></div>|4345944|4345945|entityMap^0|0|1|5|0|0|0|0|0|0|0|5|0|A|5|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1T|8|@$D|1U|E|1V|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|I|7|1W|8|@]|9|@]|A|$]]|$1|J|3|K|5|I|7|1X|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1Z|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|20|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|21|8|@$D|22|E|23|F|G]]|9|@]|A|$]]|$1|S|3|T|5|6|7|24|8|@$D|25|E|26|F|G]]|9|@]|A|$]]|$1|U|3|V|5|6|7|27|8|@]|9|@]|A|$]]|$1|W|3|X|5|Y|7|28|8|@]|9|@]|A|$Z|10]]|$1|11|3|12|5|Y|7|29|8|@]|9|@]|A|$Z|10]]|$1|13|3|V|5|6|7|2A|8|@]|9|@]|A|$]]|$1|14|3|15|5|6|7|2B|8|@]|9|@]|A|$]]|$1|16|3|17|5|6|7|2C|8|@]|9|@]|A|$]]|$1|18|3|V|5|6|7|2D|8|@]|9|@]|A|$]]|$1|19|3|1A|5|Y|7|2E|8|@]|9|@]|A|$Z|10]]|$1|1B|3|1C|5|Y|7|2F|8|@]|9|@]|A|$Z|10]]|$1|1D|3|V|5|6|7|2G|8|@]|9|@]|A|$]]|$1|1E|3|1F|5|6|7|2H|8|@]|9|@]|A|$]]|$1|1G|3|1H|5|6|7|2I|8|@]|9|@]|A|$]]|$1|1I|3|V|5|6|7|2J|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|Y|7|2K|8|@]|9|@]|A|$Z|10]]|$1|1L|3|1M|5|Y|7|2L|8|@]|9|@]|A|$Z|10]]|$1|1N|3|1O|5|Y|7|2M|8|@]|9|@]|A|$Z|10]]|$1|1P|3|V|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1Q|3|-4|5|6|7|2O|8|@]|9|@]|A|$]]]|1R|$]]

<p>In <a href="http://caniuse.com/#feat=css-filters"><strong>most browsers</strong></a>, you can use filters :</p>

<ul>
<li><p>on both <code>&lt;img&gt;</code> elements and background images of other elements</p></li>
<li><p>and set them either statically in your CSS, or dynamically using JavaScript</p></li>
</ul>

<p>See demos below.</p>

<hr>

<h3><code>&lt;img&gt;</code> elements</h3>

<p>You can apply this technique to a <code>&lt;img&gt;</code> element :</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#original, #changed {
    width: 45%;
    padding: 2.5%;
    float: left;
}

#changed {
    -webkit-filter : hue-rotate(180deg);
    filter : hue-rotate(180deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;img id="original" src="http://i.stack.imgur.com/rfar2.jpg" /&gt;

&lt;img id="changed" src="http://i.stack.imgur.com/rfar2.jpg" /&gt;</code></pre>
</div>
</div>
</p>

<h3>Background images</h3>

<p>You can apply this technique to a background image :</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>#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);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="original"&gt;&lt;/div&gt;

&lt;div id="changed"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<h3>JavaScript</h3>

<p>You can use JavaScript to set a filter at runtime :</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var element = document.getElementById("changed");
var filter = 'hue-rotate(120deg) saturate(2.4)';
element.style['-webkit-filter'] = filter;
element.style['filter'] = filter;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>#original, #changed {
    margin: 0 10%;
    width: 30%;
    float: left;
    background: url('http://i.stack.imgur.com/856IQ.png');
    background-size: cover;
    padding-bottom: 25%;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="original"&gt;&lt;/div&gt;

&lt;div id="changed"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2445914|text|我想我有一个解决方案，那就是a)正是你5年前想要的，b)比这里的其他代码选项简单一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445915|对于任何白色png+(例如，透明背景上的白色图标)，您可以添加一个::after选择器来重新着色。|2445916|.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%25;+/*+Same+dimensions+as+.icon+*/
++++height:+100%25;
++++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+*/
}|code-block|syntax|javascript|2445917|请参阅此代码(在悬停时应用颜色交换)：http://codepen.io/chrscblls/pen/bwAXZO|offset|length|2445918|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/chrscblls/pen/bwAXZO^0|0|0|0|J|12|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

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

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

<pre><code>.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 */
}
</code></pre>

<p>See this codepen (applying the color swap on hover): <a href="http://codepen.io/chrscblls/pen/bwAXZO" rel="noreferrer">http://codepen.io/chrscblls/pen/bwAXZO</a></p>


blocks|key|2445969|text|回答是因为我在寻找解决这个问题的方法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2445970|如果你有白色或黑色的背景，@chrscblls答案中的钢笔效果很好，但我的不是。另外，图像是用ng-repeat生成的，所以我不能在我的css中有他们的url，你也不能在img标签上使用::after。|2445971|所以，我想了一个办法，如果人们在这里遇到困难，我想它可能会对他们有所帮助。|2445972|因此，我所做的基本相同，但有三个主要区别：|2445973|将url放在我的img标签中，我将它(和一个标签)放在另一个div中，其中：：|2445974|将起作用。|unordered-list-item|2445975|
|2445976|‘混合-混合-模式’被设置为'difference‘，而不是'multiply’或‘|2445977|
’。|2445978|我添加了一个具有完全相同值的：：|2445979|2445980|，以便::after将'difference‘与::after产生的'difference’进行‘difference’，并取消它-self。|2445981|2445982|要将其从黑色更改为白色或将白色更改为黑色，背景颜色需要为白色。从黑色到颜色，你可以选择任何颜色。从白色到颜色，你需要选择与你想要的颜色相反的颜色。|2445983|.divClass{
+++position:+relative;
+++width:+100%25;
+++height:+100%25;
+++text-align:+left;
}
.divClass:hover::after,+.divClass:hover::before{
+++position:+absolute;
+++width:+100%25;
+++height:+100%25;
+++background:+#FFF;
+++mix-blend-mode:+difference;
+++content:+"";
}|code-block|syntax|javascript|2445984|https://codepen.io/spaceplant/pen/oZyMYG|offset|length|2445985|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|14|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|1J|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|1L|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|1M|8|@]|9|@]|A|$]]|$1|O|3|P|5|L|7|1N|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1O|8|@]|9|@]|A|$]]|$1|S|3|T|5|L|7|1P|8|@]|9|@]|A|$]]|$1|U|3|N|5|6|7|1Q|8|@]|9|@]|A|$]]|$1|V|3|W|5|L|7|1R|8|@]|9|@]|A|$]]|$1|X|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1T|8|@]|9|@]|A|$]]|$1|10|3|11|5|12|7|1U|8|@]|9|@]|A|$13|14]]|$1|15|3|16|5|6|7|1V|8|@]|9|@$17|1W|18|1X|1|1Y]]|A|$]]|$1|19|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|1A|$1B|$5|1C|1D|1E|A|$1F|16]]]]

<p>Answering because I was looking for a solution for this.</p>

<p>the pen in @chrscblls answer works well if you have a white or black background, but mine wasn't. Aslo, the images were generated with ng-repeat, so I couldn't have their url in my css AND you can't use ::after on img tags.</p>

<p>So, I figured a work around and thought it might help people if they too stumble here.</p>

<p>So what I did is pretty much the same with three main differences:</p>

<ul>
<li>the url being in my img tag, I put it(and a label) in another div on which ::after will work.</li>
<li>the 'mix-blend-mode' is set at 'difference' instead of 'multiply' or 'screen'.</li>
<li>I added a ::before with exactly the same value so the ::after would do the 'difference' of the 'difference' made by the ::before and cancelled it-self.</li>
</ul>

<p>To change it from black to white or white to black the background color need to be white. 
From black to colors, you can choose whatever color.
From white to colors tho, you'll need to choose the opposite color of the one you want.</p>

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

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


blocks|key|4061537|text|我需要一个特定的颜色，所以滤镜对我不起作用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4061538|相反，我创建了一个div，利用CSS多个背景图像和线性梯度函数(它创建图像本身)。如果你使用叠加混合模式，你的实际图像将与生成的包含你想要的颜色的“渐变”图像混合(这里是#BADA55)|4061539|​|4061540|.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;++++++++
++++}|code-block|syntax|javascript|4061541|<div+class="colored-image"></div>|4061542|4061543|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|S|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|T|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>I required a specific colour, so filter didn't work for me.</p>

<p>Instead, I created a div, exploiting CSS multiple background images and the linear-gradient function (which creates an image itself). If you use the overlay blend mode, your actual image will be blended with the generated "gradient" image containing your desired colour (here, #BADA55)</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.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;        
    }</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="colored-image"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|456441|text|我发现了一个很棒的代码示例，您插入PNG十六进制颜色PNG值，然后它返回将此颜色应用于所需的过滤器|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|456442|CSS+filter+generator+to+convert+from+black+to+target+hex+color|456443|例如，我需要我的png有以下颜色#1a9790|456444|然后，您必须将以下过滤器应用于您的png|456445|filter:+invert(48%25)+sepia(13%25)+saturate(3207%25)+hue-rotate(130deg)+brightness(95%25)+contrast(80%25);|code-block|syntax|javascript|456446|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/sosuke/pen/Pjoqqp^0|17|6|0|0|1Q|0|1Q|0|0|0|N|0|0|K|0|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|H|3|I|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1A|8|@$9|1B|A|1C|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1D|8|@]|D|@]|E|$O|P]]|$1|Q|3|-4|5|6|7|1E|8|@]|D|@]|E|$]]]|R|$S|$5|T|U|V|E|$W|X]]]]

<p>I found this great codepen example that you insert your <strong>hex color</strong> value and it returns the needed filter to apply this color to png</p>

<p><a href="https://codepen.io/sosuke/pen/Pjoqqp" rel="noreferrer">CSS filter generator to convert from black to target hex color</a></p>

<p>for example i needed my png to have the following color <strong>#1a9790</strong></p>

<p>then you have to apply the following filter to you png</p>

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


blocks|key|4061586|text|我在搜索的时候发现了这个，我发现最适合我的是...|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4061587|HTML|4061588|<div+class="img"></div>|code-block|syntax|javascript|4061589|CSS|4061590|.img+{
++background-color:+red;
++width:+60px;
++height:+60px;
+++-webkit-mask-image:+url('http://i.stack.imgur.com/gZvK4.png');
}|4061591|http://jsfiddle.net/a63b0exm/|offset|length|4061592|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|10|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|11|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|12|8|@]|9|@$O|13|P|14|1|15]]|A|$]]|$1|Q|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|R|$S|$5|T|U|V|A|$W|N]]]]

<p>I found this while googling, I found best working for me...</p>

<p>HTML</p>

<pre><code>&lt;div class="img"&gt;&lt;/div&gt;
</code></pre>

<p>CSS</p>

<pre><code>.img {
  background-color: red;
  width: 60px;
  height: 60px;
   -webkit-mask-image: url('http://i.stack.imgur.com/gZvK4.png');
}
</code></pre>

<p><a href="http://jsfiddle.net/a63b0exm/" rel="noreferrer">http://jsfiddle.net/a63b0exm/</a></p>


blocks|key|4346125|text|对我来说最简单的一句话是：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4346126|filter:+opacity(0.5)+drop-shadow(0+0+0+blue);|code-block|syntax|javascript|4346127|可以将不透明度从0调整为1，以使颜色更亮或更暗。|4346128|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>The simplest one line that worked for me:</p>

<pre><code>filter: opacity(0.5) drop-shadow(0 0 0 blue);
</code></pre>

<p>You can adjust opacity from 0 to 1 to make color lighter or darker.</p>


blocks|key|4346147|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4346148|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;
}|code-block|syntax|javascript|4346149|<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>|4346150|4346151|来源：https://codepen.io/taryaoui/pen/EKkcu|offset|length|4346152|entityMap|0|LINK|mutability|MUTABLE|url|https://codepen.io/taryaoui/pen/EKkcu^0|0|0|0|0|3|11|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|W|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|Y|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|Z|8|@]|9|@$L|10|M|11|1|12]]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="preview"&gt;
  &lt;input class='red' name='color' type='radio' /&gt;
  &lt;input class='green' name='color' type='radio' /&gt;
    &lt;input class='pink' name='color' type='radio' /&gt;
  &lt;input checked class='yellow' name='color' type='radio' /&gt;
  &lt;input class='purple' name='color' type='radio' /&gt;  
  &lt;img src="https://i.stack.imgur.com/bd7VJ.png"/&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>Source: <a href="https://codepen.io/taryaoui/pen/EKkcu" rel="noreferrer">https://codepen.io/taryaoui/pen/EKkcu</a></p>


blocks|key|456507|text|将图片从黑色更改为白色或将白色更改为黑色时，色调旋转滤镜不起作用，因为从技术上讲，黑色和白色不是颜色。相反，必须使用反转滤镜属性进行黑白颜色更改(从黑色更改为白色或反之亦然)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|456508|.img1+{+++filter:+invert(100%25);+}|offset|length|style|CODE|456509|entityMap^0|0|0|X|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|I|$]]

<p>When changing a picture from black to white, or white to black the hue rotate filter does not work, because black and white are not technically colors.  Instead, black and white color changes (from black to white or vice-versa) must be done with the invert filter property. </p>

<p><code>.img1 {
  filter: invert(100%);
}</code></p>


blocks|key|454435|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|454436|+-webkit-filter:+brightness(0)+invert(1);
+filter:+brightness(0)+invert(1);+|code-block|syntax|javascript|454437|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Try this:</p>
<pre><code> -webkit-filter: brightness(0) invert(1);
 filter: brightness(0) invert(1); 
</code></pre>


blocks|key|4061683|text|使用这个很棒的代码示例，您插入十六进制颜色值，它将返回将此颜色应用于png所需的滤镜|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4061684|用于将黑色转换为目标十六进制颜色的CSS过滤器生成器|4061685|例如，我需要我的png具有以下颜色#EF8C57|4061686|然后，您必须将以下过滤器应用于您的png结果：|4061687|filter:+invert(76%25)+sepia(30%25)+saturate(3461%25)+hue-rotate(321deg)+brightness(98%25)+contrast(91%25);|code-block|syntax|javascript|4061688|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|R|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|S|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Use this great codepen example that you insert your hex color value and it returns the needed filter to apply this color to png</p>
<p>CSS filter generator to convert from black to target hex color</p>
<p>for example i needed my png to have the following color #EF8C57</p>
<p>then you have to apply the following filter to you png
Result:</p>
<pre><code>filter: invert(76%) sepia(30%) saturate(3461%) hue-rotate(321deg) brightness(98%) contrast(91%);
</code></pre>


blocks|key|4061763|text|对我有效的解决方案是使用filter:+drop-shadow|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4061764|滤镜:+drop-shadow的工作方式与常规box-shadow不同。|4061765|filter+one将阴影应用于真实形状(因此它支持透明图像)。|4061766|现在的诀窍是“隐藏”真实图像，只显示阴影。|4061767|https://jsfiddle.net/d4m8x0qb/2|4061768|​|4061769|📷|atomic|4061770|4061771|请注意，我的用例是将图标颜色修改为一种纯色，因此此方法适用于我，但可能不适用于其他用例|4061772|entityMap|0|LINK|mutability|MUTABLE|url|1|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/d2a38593fc2510c8a682c5e9553e24ba.png|imageAlt^0|C|J|0|N|A|0|0|6|0|0|0|V|0|0|0|0|1|1|0|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1B|8|@$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@$9|1F|A|1G|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|1H|8|@]|D|@]|E|$]]|$1|L|3|M|5|6|7|1I|8|@]|D|@$9|1J|A|1K|1|1L]]|E|$]]|$1|N|3|O|5|6|7|1M|8|@]|D|@]|E|$]]|$1|P|3|Q|5|R|7|1N|8|@]|D|@$9|1O|A|1P|1|1Q]]|E|$]]|$1|S|3|O|5|6|7|1R|8|@]|D|@]|E|$]]|$1|T|3|U|5|6|7|1S|8|@]|D|@]|E|$]]|$1|V|3|-4|5|6|7|1T|8|@]|D|@]|E|$]]]|W|$X|$5|Y|Z|10|E|$11|M]]|12|$5|13|Z|14|E|$15|16|17|-4]]]]

<p>The solution that worked for me was using <code>filter: drop-shadow</code></p>
<p>filter: drop-shadow works differently than regular <code>box-shadow</code>.</p>
<p><code>filter</code> one applies shadow to real shape (so it supports transparent images).</p>
<p>The trick now is to 'hide' real image and show only the shadow.</p>
<p><a href="https://jsfiddle.net/d4m8x0qb/2" rel="nofollow noreferrer">https://jsfiddle.net/d4m8x0qb/2</a></p>
<p><a href="https://i.stack.imgur.com/u5vsQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/u5vsQ.png" alt="enter image description here" /></a></p>
<p>Note that my use case is modifying icons colors into one, solid color, so this approach works for me, but might not for other use cases</p>


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


Change color of PNG image via CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

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

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

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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