Как отобразить только 1 пиксель от загруженного изображения и разбить его на плитки

Question

Я создаю панель управления, которая позволяет мне управлять более чем 50 отдельными проектами.Каждый проект имеет 3 - 5 сборок Ci, и я хочу отобразить состояние всех этих сборок.Я могу загрузить значок состояния сборки для каждой работы, но у меня недостаточно места для отображения 5 больших значков.

Я хочу взять 1 пиксель из этого значка, который будет либо красного цвета,зеленый или синий, а затем наложить один пиксель на квадрат размером 10 * 10 пикселей, чтобы было легко увидеть, что все сборки зеленого цвета.немного поэкспериментировал и никак не мог приблизиться к тому, чтобы заставить его работать.

Большое спасибо

Answer 1

Вы пытались использовать свойство CSS background-size?

Вы можете использовать значок в качестве фонового изображения и сделать его настолько большим, что на плитке будет виден только один пиксель.

.my-tile {
    width: 10px;
    height: 10px;
    background-image: url(YOUR BADGE URL) ;
    background-position: left top;
    background-size: 2000px 2000px; /* as big as you need */
} 

Также см. Этот рабочий пример на скрипке: https://jsfiddle.net/549bxa6r/