blocks|key|2577635|text|没有纯粹的CSS方法可以做到这一点--您至少需要一些SVG魔力。例如，您可以定义一个过滤器。然而，要确定颜色是很棘手的，因为它需要一些不那么微不足道的数学知识、矩阵知识以及计算机如何处理颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2577636|下面是一个包含金色图像的示例。|2577637|​|2577638|.defs-only+{
++position:+fixed;
++left:+-9999px;
++top:+-9999px;
++z-index:+-1;
++width:+1px;
++height:+1px;
}

img+{
++filter:++url(#monochrome);
}|code-block|syntax|javascript|2577639|<svg+class="defs-only">
++<filter+id="monochrome"+color-interpolation-filters="sRGB"
++++++++++x="0"+y="0"+height="100%25"+width="100%25">
++++<feColorMatrix+type="matrix"
++++++values="1.00+0+0+0++0+
++++++++++++++0.80+0+0+0++0++
++++++++++++++0.65+0+0+0++0+
++++++++++++++++0++0+0+1++0"+/>
++</filter>
</svg>

<img+src="https://i.stack.imgur.com/nQET4.png">|2577640|2577641|例如，查看this+article+for+more+info。|offset|length|2577642|entityMap|0|LINK|mutability|MUTABLE|url|https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/^0|0|0|0|0|0|0|5|Q|0|0^^$0|@$1|2|3|4|5|6|7|Z|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|10|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|12|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|H|7|13|8|@]|9|@]|A|$I|J]]|$1|M|3|E|5|6|7|14|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|15|8|@]|9|@$P|16|Q|17|1|18]]|A|$]]|$1|R|3|-4|5|6|7|19|8|@]|9|@]|A|$]]]|S|$T|$5|U|V|W|A|$X|Y]]]]

<p>There's no pure CSS way to do this -- you'll need at least some SVG magic. For example, you can define a filter. It's, however, tricky to nail the color as it requires some not-so-trivial knowledge of maths, matrices and how computers work with colors. </p>

<p>Here's an example with golden images.</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>.defs-only {
  position: fixed;
  left: -9999px;
  top: -9999px;
  z-index: -1;
  width: 1px;
  height: 1px;
}

img {
  filter:  url(#monochrome);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg class="defs-only"&gt;
  &lt;filter id="monochrome" color-interpolation-filters="sRGB"
          x="0" y="0" height="100%" width="100%"&gt;
    &lt;feColorMatrix type="matrix"
      values="1.00 0 0 0  0 
              0.80 0 0 0  0  
              0.65 0 0 0  0 
                0  0 0 1  0" /&gt;
  &lt;/filter&gt;
&lt;/svg&gt;

&lt;img src="https://i.stack.imgur.com/nQET4.png"&gt;</code></pre>
</div>
</div>
</p>

<p>Check out, for example, <a href="https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/" rel="nofollow noreferrer">this article for more info</a>.</p>


blocks|key|2577685|text|您也可以使用blend-modes，但由于您的图像是透明的，它将不幸地将背景颜色应用于...背景也是如此。如果你能得到与黑色背景相同的图像，它就会起作用。如果MDN提供full+list+of+blend+modes，那么您可以使用不同的值。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2577686|​|2577687|.sprite+{
++width:+256px;
++height:+256px;
++background-image:+url(https://i.stack.imgur.com/nQET4.png);
++background-color:+#ab1248;
++background-blend-mode:+hard-light;
++
}|code-block|syntax|javascript|2577688|<div+class="sprite">|2577689|2577690|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode^0|6|B|2C|O|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|15|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|16|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|Q|$R|$5|S|T|U|E|$V|W]]]]

<p>You could also use <code>blend-modes</code> but since your image is transparent, it will unfortunately apply the background-color to the... background, as well. If you can get the same image with the black background, it would work. A <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode" rel="nofollow noreferrer">full list of blend modes</a> if available at MDN, so you can play with different values.</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>.sprite {
  width: 256px;
  height: 256px;
  background-image: url(https://i.stack.imgur.com/nQET4.png);
  background-color: #ab1248;
  background-blend-mode: hard-light;
  
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="sprite"&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2367362|text|如果您使用透明png，则可以组合使用mask和mix-blend-mode|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2367363|​|2367364|.bubble{
++display:+inline-block;
++float:+left;
++-webkit-mask:+url(https://i.stack.imgur.com/og0JD.png);
++mix-blend-mode:+normal;
++width:20px;
++height:20px;
}

#color1{
++background-color:blue;
}

#color2{
++background-color:red;
}

#color3{
++background-color:green;
}
#color4{
++background-color:yellow;
}
#color5{
++background-color:pink;
}|code-block|syntax|javascript|2367365|<div+id="color1"+class="bubble"></div>
<div+id="color2"+class="bubble"></div>
<div+id="color3"+class="bubble"></div>
<div+id="color4"+class="bubble"></div>
<div+id="color5"+class="bubble"></div>|2367366|2367367|2367368|📷|atomic|2367369|2367370|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/CSS/mask|1|https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/2c629f0f99585b12b30d0de9f7beed13.png|imageAlt^0|I|4|0|N|E|1|0|0|0|0|0|0|0|1|2|0|0^^$0|@$1|2|3|4|5|6|7|18|8|@]|9|@$A|19|B|1A|1|1B]|$A|1C|B|1D|1|1E]]|C|$]]|$1|D|3|E|5|6|7|1F|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|1G|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|H|7|1H|8|@]|9|@]|C|$I|J]]|$1|M|3|E|5|6|7|1I|8|@]|9|@]|C|$]]|$1|N|3|E|5|6|7|1J|8|@]|9|@]|C|$]]|$1|O|3|P|5|Q|7|1K|8|@]|9|@$A|1L|B|1M|1|1N]]|C|$]]|$1|R|3|E|5|6|7|1O|8|@]|9|@]|C|$]]|$1|S|3|-4|5|6|7|1P|8|@]|9|@]|C|$]]]|T|$U|$5|V|W|X|C|$Y|Z]]|10|$5|V|W|X|C|$Y|11]]|12|$5|13|W|14|C|$15|16|17|-4]]]]

<p>If you work with transparent png, you can combine <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mask" rel="nofollow noreferrer">mask</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode" rel="nofollow noreferrer">mix-blend-mode</a></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>.bubble{
  display: inline-block;
  float: left;
  -webkit-mask: url(https://i.stack.imgur.com/og0JD.png);
  mix-blend-mode: normal;
  width:20px;
  height:20px;
}

#color1{
  background-color:blue;
}

#color2{
  background-color:red;
}

#color3{
  background-color:green;
}
#color4{
  background-color:yellow;
}
#color5{
  background-color:pink;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="color1" class="bubble"&gt;&lt;/div&gt;
&lt;div id="color2" class="bubble"&gt;&lt;/div&gt;
&lt;div id="color3" class="bubble"&gt;&lt;/div&gt;
&lt;div id="color4" class="bubble"&gt;&lt;/div&gt;
&lt;div id="color5" class="bubble"&gt;&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p><a href="https://i.stack.imgur.com/og0JD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/og0JD.png" alt="enter image description here"></a></p>


<p>I have a CP437 tileset:</p>

<p><a href="https://i.stack.imgur.com/nQET4.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nQET4.png" alt="enter image description here"></a></p>

<p>which I want to use as a CSS sprite on a webpage Currently, I have a very simple markup and css:</p>

<pre><code>.tile {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.cp437-0 {
    background: url('tileset/tileset.png') 0 0;
}

.cp437-1 {
    background: url('tileset/tileset.png') 16px 0;
}

// ...

&lt;span class="tile, cp437-0"&gt;&amp;nbsp;&lt;/span&gt;
</code></pre>

<p>This works very well, but I'd also like to add color to these grayscale sprites. How can I do this with using HTML/CSS or Javascript?</p>

<p>Is it possible to set background color for the resulting image?</p>

<p><strong>Clarification:</strong></p>

<p>I'd like to be able to draw things like these to the browser window using the sprite:</p>

<p><a href="https://i.stack.imgur.com/wwxcO.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wwxcO.png" alt="enter image description here"></a>
<a href="https://i.stack.imgur.com/1vEVm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1vEVm.png" alt="enter image description here"></a></p>


How to add color to grayscale images with css / html or javascript?

我有一个CP437磁贴集：​​目前我想在网页上使用它作为CSS精灵，我有一个非常简单的标记和css：.tile {    display: inline-block;    width: 16px;    height: 16px;}.cp437-0 {    background: url('tileset/tile...

问如何使用css / html或javascript为灰度图像添加颜色？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css / html或javascript为灰度图像添加颜色？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用css / html或javascript为灰度图像添加颜色？
EN