Question

最终结果应该与附图（Link to illustation）相似。

图片的每个部分都是在Illustrator中绘制的单个png图像，每个部分都有自己的CSS类。

我的问题是如何制作每个块（png）的位置，以使它们看起来像这样。我可以使用哪些CSS属性来定位它们。

我也意识到他们不能垂直居中，因为他们似乎不会在彼此的中间。

我之前使用过ng-repeat绘制圆圈（作为圆形div），但是我只在一个维度上获得所有圆圈。

任何想法如何做到这一点以及在做这件事时我需要考虑的事情？

Fiddle is here: https://jsfiddle.net/tyt4ft3g/1/

Answer 1

无论你尝试过什么都是绝对正确的，并且是做这个目标的最佳方式。

基本上，您必须为所有position: absolute元素提供img，并且拥有共同的position: relative父元素。您必须使用right和bottom属性正确定位它们，以便每个图像都显示在其前任的中心。

此外，为顶部的图像提供更高的z-index（即左侧较小的图像应具有比右侧较小的z-index较低的顺序）。

更新了fiddle。

参考代码以获得更好的视角：

.parent {
  width: 300px;
  height: 200px;
  position: relative;
}

.copper {
  height: 30px;
  right: 72px;
  bottom: 28px;
  position: absolute;
  z-index: 3;
  content: url(http://i.imgur.com/LeIGPou.png);
}

.ins {
  height: 60px;
  right: 37px;
  bottom: 16px;
  position: absolute;
  z-index: 2;
  content: url(http://i.imgur.com/3bMaW3t.png);
}

.power {
  height: 70px;
  right: 0;
  bottom: 16px;
  position: absolute;
  z-index: 1;
  content: url(http://i.imgur.com/jFYquAI.png);
}

<div class="parent">
  <img class="copper">
  <img class="ins">
  <img class="power">
</div>

使用ng-repeat的3d对象的位置

1 个答案: