0

我很难弄清楚为什么我不能在下面的 html 片段中显示图像，但只能显示在顶部。我已经搞砸了 z-index、!important 覆盖和其他几个小时，但无济于事。我怀疑这可能与引导程序处理卡片的方式有关。

理想情况下，我想在堆栈的“底部”放置一个纯色背景，然后是背景图像，然后是实际的叠加层。如果我可以将它们分成 div 会非常方便，但我不确定这是否与引导卡兼容。在这一点上，只要背景图像不在顶部，我就会采取任何措施。

请参阅底部的图像以获取输出。

  • 实际行为：（从下到上）（纯色背景-->内容-->背景图片）
  • 期望的行为：（从下到上）（纯色背景-->背景图像-->内容）

对于上下文，我有烧瓶运行一个使用此代码作为片段的模板。该片段被“调用”三次以生成图像中显示的网格。据我了解，这应该是确定问题所在所需要的全部内容。如果没有，我会很乐意编辑它以包含更多内容。



<div class="card">

  <div style="opacity:{{category['opacity']}}; z-index: 0">
    {% if category['image'] is not none %}
    <img src={{category['image']}} class="card-img-overlay" style="object-fit: cover; height: 100%; width: 100%; padding: 0%;">
    {% endif %}
  </div>

  <div class="card-body" style="z-index: 1 !important; background-color: {{category['color']}}; color: black;">
  <div >

  </div>
    <div style='z-index: 5 !important;'>
      <br><br><br>
      <a href={{category['url']}} class="stretched-link"></a>
      <h3 class="card-title text-center">{{category['name']}}</h3>
      <hr style="border-color: white;">
      <p class="card-text text-center font-weight-bold">{{category['description']}}</p>
      <br><br><br>
      <!-- <ul class="list-group">
        <li class="list-group-item">url: {{category['url']}}</li>
        <li class="list-group-item">img: {{category['image']}}</li>
      </ul> -->
    </div>

  </div> 
</div>

片段输出

4

1 回答 1

0

找到了解决方案。很多事情都是错误的，但获得我上面描述的行为的正确方法如下：

<div class="card bg-dark text-white">
  <div style="background-color: {{category['color']}};">
    <div style="opacity:{{category['opacity']}};">
      {% if category['image'] is not none %}
      <img class="card-img" src={{category['image']}} alt="" style="object-fit: cover; height: 100%; width: 100%; padding: 0%;">
      {% endif %}
    </div>
    <div class="card-img-overlay text-center">
      <a href={{category['url']}} class="stretched-link"></a>
      <h3 class="card-title text-center">{{category['name']}}</h3>
      <hr style="border-color: white;">
      <p class="card-text text-center font-weight-bold">{{category['description']}}</p>
    </div>
  </div>
</div>

期望的行为

于 2020-03-31T05:28:10.957 回答