不透明的 GIF 变透明

Question

所以大多数时候，人们会问如何将他们的 GIF 背景变为透明。我的目标正好相反。

我有一个白色背景的 GIF，我想在触发 AJAX 调用时将其显示为加载动画。不幸的是，背景变透明了，我不知道为什么。

有人有想法吗？ GIF是用Photoshop导出的，保存时没有透明度。

这就是我插入 Loader 的方式。

.blockUI.blockOverlay:before,
    .loader:before {
        height: 20em;
        width: 20em;
        position: fixed;
        top: 20%;
        left:50%;
        margin-left: -10em;
        margin-right: -10em;
        display: block;
        content: "";
        -webkit-animation: none;
        -moz-animation: none;
        animation: none;
        background-image:url('<?php echo get_stylesheet_directory_uri() . "/images/caglayan-spinner2.gif"; ?>') !important;
        background-position: center center;
        background-size: cover;
        line-height: 1;
        text-align: center;
        font-size: 2em;
    }

下面有 2 个屏幕截图。首先是原始 GIF。第二个是网页上的GIF

Answer 1

GIF 文件本身不是问题。它在相关区域有白色背景：

我相信冰箱单元的图像是透明的 - 它位于加载动画的顶部。

这是因为stacking context and z-index.

如果你把动画放在最上面，它会解决这个问题。

不透明的 GIF 变透明

Non-transparent GIF turns transparent

html

wordpress

animation

gif

animated-gif