如何将图像组合成堆栈

Question

我想将3张图像组合成一个堆栈，如下图所示：

堆栈的大小必须为48x48。

有什么办法吗？我相信只有通过CSS和使用一点JS才能做到这一点。

Answer 1

这是可能的：https://jsfiddle.net/ncrLqwbu/

它基本上确保存在特定数量的元素，这些元素指定元素大小：

.block:first-child:nth-last-child(2),
.block:first-child:nth-last-child(2) ~ div {
    width: 42px;
    height: 42px;
}

然后它决定需要做多少对齐：

.block:first-child:nth-last-child(2) ~ div:nth-child(2) {top: 6px; left: 6px}

但是这会缩放n ^ 2，这意味着CSS的数量将呈指数级增长

此解决方案非常不方便，因为CSS无法计算其父级中的元素，这意味着您需要为每个元素计数层添加越来越多的CSS类。使用Javascript

会更容易

修改

添加了SASS版本：https://jsfiddle.net/k7nupbrd/1/

编辑＃2：

此问题已被编辑。起初，它需要支持N个元素。