透明图像在模式中使用时不是透明的

Question

我试图附加一个模式，将只包含一个透明的gif。不幸的是，它没有以透明的背景显示。gifs的透明度没有问题。我试图使一个加载屏幕与黑色的背景和透明的gif。下面是我的模式的css类：

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

Modals html (顺便说一下，我正在使用vue-js-modal库)：

<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设置一个透明的背景，这样你才能实现你的输出。