Как добавить цвет к изображениям в градациях серого с помощью CSS / HTML или JavaScript? - PullRequest
Новая
       34

Как добавить цвет к изображениям в градациях серого с помощью CSS / HTML или JavaScript?

0 голосов
/ 28 сентября 2018

У меня есть набор плиток CP437:

enter image description here

, который я хочу использовать в качестве спрайта 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">&nbsp;</span>

Это работает очень хорошо, но я также хотел бы добавить цвет к этим спрайтам в градациях серого.Как я могу сделать это с использованием HTML / CSS или Javascript?

Можно ли установить цвет фона для получающегося изображения?

Уточнение:

Я хотел бы иметь возможность рисовать подобные вещи в окне браузера, используя спрайт:

enter image description here enter image description here

Ответы [ 3 ]

0 голосов
/ 28 сентября 2018

Вы также можете использовать blend-modes, но поскольку ваше изображение прозрачное, к сожалению, оно также применяет цвет фона к ... фону.Если вы можете получить то же изображение с черным фоном, это будет работать. Полный список режимов наложения , если они доступны в MDN, поэтому вы можете играть с разными значениями. 

.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">
0 голосов
/ 28 сентября 2018

Если вы работаете с прозрачным 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>

enter image description here

0 голосов
/ 28 сентября 2018

Нет чистого 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">

Проверьте, например, эту статью для получения дополнительной информации .

...