Question

我正在构建一个仪表板，使我可以管理50多个单独的项目。每个项目都有3-5个Ci构建，我想显示所有这些构建的状态。我可以为每个作业加载构建状态标志，但是我没有足够的空间来显示5个大标志。

我想做的是从此徽章中获取1个像素，该像素将是红色，绿色或蓝色，然后将该像素平铺为10 * 10像素的正方形，因此很容易看到所有构建都是绿色的。 / p>

我认为我可能想用CSS精灵来做到这一点，但是我做了一些实验，无法接近使其工作。

非常感谢

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/

如何从加载的图像中仅显示1个像素并将其平铺

1 个答案: