Фон границы при выборе таблицы спрайтов CS

Question

Есть ли способ добавить границу в прозрачную таблицу спрайтов?

Допустим, у меня есть это:

.sq {
  background-image: url(https://cdn1.imggmi.com/uploads/2019/2/1/e2a2c021dba58c1a7c98252d3b1a6568-full.png);
  height: 32px;
  background-position: left -160px top -32px;
  width: 32px;
}

<div class="sq"></div>

Как бы я мог сделать так, чтобы я мог добавить маленькую желтую рамку размером 2 пикселя на ее прозрачный край?Я знаю, что могу сделать это сепией или оттенком / насыщенностью ... но я не нашел пути для границы на листе спрайтов.

Мне нужна граница для самого ИЗОБРАЖЕНИЯ.Не DIV или контейнер.

Answer 1

добавить фильтр: тени в вашем классе filter: drop-shadow(2px 1px 0 yellow) drop-shadow(-1px -1px 0 yellow); это будет работать

.sq {
  background-image: url(https://cdn1.imggmi.com/uploads/2019/2/1/e2a2c021dba58c1a7c98252d3b1a6568-full.png);
  height: 32px;
  background-position: left -160px top -32px;
  width: 32px;
  -webkit-filter: drop-shadow(2px 1px 0 yellow)
                  drop-shadow(-1px -1px 0 yellow);
  filter: drop-shadow(2px 1px 0 yellow) 
          drop-shadow(-1px -1px 0 yellow);
}

<div class="sq"></div>