如何使用css / html或javascript为灰度图像添加颜色？
如何使用css / html或javascript为灰度图像添加颜色？
提问于 2018-09-28 05:14:37
我有一个CP437磁贴集：
目前我想在网页上使用它作为CSS精灵，我有一个非常简单的标记和css：
.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;
}
// ...
<span class="tile, cp437-0"> </span>这个效果很好，但我也想给这些灰阶精灵增加颜色。如何使用HTML/CSS或Javascript执行此操作？
可以为生成的图像设置背景颜色吗？
Clarification:
我希望能够使用sprite将这些东西绘制到浏览器窗口中：
回答 3
Stack Overflow用户
发布于 2018-09-28 05:19:40
没有纯粹的CSS方法可以做到这一点--您至少需要一些SVG魔力。例如，您可以定义一个过滤器。然而，要确定颜色是很棘手的，因为它需要一些不那么微不足道的数学知识、矩阵知识以及计算机如何处理颜色。
下面是一个包含金色图像的示例。
.defs-only {
position: fixed;
left: -9999px;
top: -9999px;
z-index: -1;
width: 1px;
height: 1px;
}
img {
filter: url(#monochrome);
}<svg class="defs-only">
<filter id="monochrome" color-interpolation-filters="sRGB"
x="0" y="0" height="100%" width="100%">
<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">
Stack Overflow用户
发布于 2018-09-28 05:32:43
您也可以使用blend-modes，但由于您的图像是透明的，它将不幸地将背景颜色应用于...背景也是如此。如果你能得到与黑色背景相同的图像，它就会起作用。如果MDN提供full list of blend modes，那么您可以使用不同的值。
.sprite {
width: 256px;
height: 256px;
background-image: url(https://i.stack.imgur.com/nQET4.png);
background-color: #ab1248;
background-blend-mode: hard-light;
}<div class="sprite">
Stack Overflow用户
发布于 2018-09-28 06:19:33
如果您使用透明png，则可以组合使用mask和mix-blend-mode
.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;
}<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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/52545236
复制相关文章
相似问题