不透明的 GIF 变透明答案

【问题标题】：Non-transparent GIF turns transparent不透明的 GIF 变透明
【发布时间】：2021-03-18 17:27:06
【问题描述】：

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

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

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

这就是我插入加载器的方式。

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

【问题讨论】：

也许尝试用非常浅的灰色替换所有的白色，即#FEFEFE / rgb(254,254,254)？

标签： html wordpress animation gif animated-gif

【解决方案1】：

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

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

这是因为stacking context and z-index。

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

【讨论】：

你完全正确。好像我没有设置任何背景颜色，所以容器背景确实是透明的。谢谢！