Прозрачное изображение не является прозрачным при использовании в модальном

Question

Я пытаюсь добавить модал, который будет состоять только из прозрачного GIF. К сожалению, он не отображается с прозрачным фоном. С прозрачностью картинки нет проблем. Я пытаюсь сделать загрузочный экран с черным фоном и прозрачным GIF. Вот мой класс css для моего модала:

.v--modal-overlay[data-modal="loading"] {
  background: black;
} 

Модалы html (кстати, я использую vue - js -модальную библиотеку):

<modal name="loading" width="256px" height="256px">
          <img src="../../public/loading.gif" />
        </modal>

Я ожидал, что это будет выглядеть так:

Но вместо этого получил этот с белым фоном:

Answer 1

.bg_black {
  background: #000;
  height: 100vh;
}

.bg_black img {
  position: absolute;
  width: 100px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="bg_black">
  <img src="https://media.giphy.com/media/17mNCcKU1mJlrbXodo/giphy.gif">
</div>

Вы должны знать, что вам нужно поместить прозрачный фон вашего GIF-файла, чтобы получить результат.