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

Question

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

我想要做的是从这个徽章中取出 1 个像素，它可以是红色、绿色或蓝色，然后将该像素平铺成 10*10 像素的正方形，这样很容易看出所有构建都是绿色的.

我想我可能想用 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 */
}

另请参阅 fiddle 上的这个工作示例：https://jsfiddle.net/549bxa6r/

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

How to display only 1 pixel from loaded image and tile it

html

css

image

css-sprites