创建堆叠像素网格以表示计数

Question

我正在创建一个像素网格来表示一个计数（见图），并想知道最好的方法是什么。

这些瓷砖需要响应（1px，2px，4px）。我可以构建一个包含所有196个@ 4X组合的超大精灵，因此它可以完美地扩展到2px和1px，然后构建一个css类......

<div class="pixel-block c-000"></div>
<div class="pixel-block c-001"></div>

......必须有更好的方法吗？

任何想法都赞赏。

Answer 1

这是一个如何在不使用具有196种组合的精灵，仅仅是网格图像和CSS的情况下完成它的示例。

这个想法很简单：

• 有一个容器将容纳：
  • 网格图像（在顶部）
  • A＆＃34; big＆＃34;将覆盖容器整个高度的酒吧。
  • A＆＃34;小＆＃34;只会覆盖其余部分的酒吧。
• ＆＃34;大酒吧＆＃34;将具有等于网格中孔的（计数值/ 14）*宽度的宽度。
• ＆＃34;低栏＆＃34;高度等于（计数值％14）*网格中孔的高度。

我使用了一个3px孔（2px + 1px分离）的网格，以及data-属性来设置计数值，以及大条形图（计数/ 14）和低条形图（计数） ％14）。

这是一个演示：

＆＃13;

＆＃13;

.box {
    border:1px solid #6699aa;
    width:43px;
    height:43px;
    position:relative;
    background:#aaccff;
    overflow:hidden;
    display:inline-block;
}

.grid { background:url(http://i.imgur.com/w0jBLzK.png) no-repeat top left;
    width:43px;
    height:43px;
    position:absolute;
    top:0;
    left:0;
    z-index:3;
}

.bigbar {
    height:43px;
    width:0px;
    background:black;
    z-index:2;
    float:left;
}

.lowbar {
    float:left;
    width:3px;
    height:0px;
    position:relative;
    background:black;
}

.box[data-big="1"] .bigbar { width:3px; }
.box[data-big="2"] .bigbar { width:6px; }
.box[data-big="3"] .bigbar { width:9px; }
.box[data-big="4"] .bigbar { width:12px; }
.box[data-big="5"] .bigbar { width:15px; }
.box[data-big="6"] .bigbar { width:18px; }
.box[data-big="7"] .bigbar { width:21px; }
.box[data-big="8"] .bigbar { width:24px; }
.box[data-big="9"] .bigbar { width:27px; }
.box[data-big="10"] .bigbar { width:30px; }
.box[data-big="11"] .bigbar { width:33px; }
.box[data-big="12"] .bigbar { width:36px; }
.box[data-big="13"] .bigbar { width:39px; }
.box[data-big="14"] .bigbar { width:42px; }

.box[data-low="1"] .lowbar { height:3px; margin-top:39px; }
.box[data-low="2"] .lowbar { height:6px; margin-top:36px; }
.box[data-low="3"] .lowbar { height:9px; margin-top:33px; }
.box[data-low="4"] .lowbar { height:12px; margin-top:30px; }
.box[data-low="5"] .lowbar { height:15px; margin-top:27px; }
.box[data-low="6"] .lowbar { height:18px; margin-top:24px; }
.box[data-low="7"] .lowbar { height:21px; margin-top:21px; }
.box[data-low="8"] .lowbar { height:24px; margin-top:18px; }
.box[data-low="9"] .lowbar { height:27px; margin-top:15px; }
.box[data-low="10"] .lowbar { height:30px; margin-top:12px; }
.box[data-low="11"] .lowbar { height:33px; margin-top:9px; }
.box[data-low="12"] .lowbar { height:36px; margin-top:6px; }
.box[data-low="13"] .lowbar { height:39px; margin-top:3px; }
.box[data-low="14"] .lowbar { height:42px; margin-top:0px; }

＆＃13;

<div class="box" data-count="0" data-big="0" data-low="0">
    <div class="grid"></div>
    <div class="bigbar"></div>
    <div class="lowbar"></div>
</div>

<div class="box" data-count="5" data-big="0" data-low="5">
    <div class="grid"></div>
    <div class="bigbar"></div>
    <div class="lowbar"></div>
</div>

<div class="box" data-count="34" data-big="2" data-low="10">
    <div class="grid"></div>
    <div class="bigbar"></div>
    <div class="lowbar"></div>
</div>

<div class="box" data-count="196" data-big="14" data-low="0">
    <div class="grid"></div>
    <div class="bigbar"></div>
    <div class="lowbar"></div>
</div>

＆＃13;

＆＃13;

＆＃13;