Изображение в наложении изображений на картах bootstrap всегда отображается сверху - PullRequest
Новая
       36

Изображение в наложении изображений на картах bootstrap всегда отображается сверху

0 голосов
/ 30 марта 2020

У меня возникли проблемы с выяснением, почему я не могу показать изображение из следующего фрагмента html где-либо, кроме как сверху. Я перепутал с z-index, важными переопределениями и другими вещами в течение нескольких часов безрезультатно. Я подозреваю, что это может иметь какое-то отношение к тому, как bootstrap обрабатывает карты.

В идеале я хотел бы поместить фон solid в «нижнюю часть» стопки, за которым следует фоновое изображение, а затем фактическое наложение. Было бы очень удобно, если бы я мог разделить их на div, но я не уверен, что это совместимо с bootstrap картами. На этом этапе я возьму что-нибудь, пока фоновое изображение не сверху.

См. Изображение внизу для вывода.

  • Фактическое поведение: (снизу вверх) (solid background -> content -> background image)
  • Желаемое поведение: (снизу вверх) (solid background -> background image -> content)

Для контекста у меня flask работает шаблон, который используя этот код в качестве фрагмента. Фрагмент «вызывается» три раза для создания сетки, показанной на изображении. Насколько я понимаю, это должно быть всем, что нужно, чтобы определить, что не так. Если нет, я с удовольствием отредактирую это, чтобы включить больше. 



<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>

сниппит вывода

1 Ответ

0 голосов
/ 31 марта 2020

Нашел решение. Многие вещи были неправильными, но правильный способ получить поведение, которое я описал выше, приведен ниже: 

<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>

желаемое поведение

...