html - 如何将多个图像垂直放置在单个图像的顶部

Question

我将多个图像（一个在其他图像下方）放置在单个图像的顶部。要放置在顶部的图像数量来自后端，因此我应用于将一张图像放置在另一张图像上的 css 仅适用于一张图像，不适用于其他图像。怎么做？因为我在顶部只得到一张图片。基本上三个前景图像需要垂直定位在一个背景图像上。

<div class="row">
{% for a in count %}
  <div class="column">
    <img src="{{ url_for('static', filename='building.jpg') }}" id="backgroundimage" title="Total Floors: 3&#10;Total Rooms: 6" />
      <p>{{ a }}</p>
    {% for b in rows%}
     <img src="{{ url_for('static', filename='building.jpg') }}" id="foregroundimage" title="Total Floors: 3&#10;Total Rooms: 6" />
    {% endfor %}
  </div>
{% endfor %}

标签： htmlcssimage

Answer 1

如果我理解你想要做什么，我会在 Jinja2 loop.index函数的帮助下使用 CSS z-index 值。

所以试试这个：

<div class="row">
{% for a in count %}
  <div class="column">
    <img src="{{ url_for('static', filename='building.jpg') }}" id="backgroundimage" title="Total Floors: 3&#10;Total Rooms: 6" />
      <p>{{ a }}</p>
    {% for b in rows%}
     <img style="z-index: -{{loop.index}};" src="{{ url_for('static', filename='building.jpg') }}" id="foregroundimage" title="Total Floors: 3&#10;Total Rooms: 6" />
    {% endfor %}
  </div>
{% endfor %}

---

值得注意。

循环索引

• 循环的当前迭代。（1个索引）

循环.index0

• 循环的当前迭代。（0 索引）

CSS z-index 属性

Jinja2 变量