Question

装载机有一种奇怪的模糊不清的颜色。原始装载机看起来不像附加的装载机。请参阅附件和以下代码。 [！[在此处输入图像说明] [1]] [1]

#acp-overlay
{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: black;
    -moz-opacity: 0.3;
    opacity:.3;
    filter: alpha(opacity=30);
    z-index: 10000;
}

    #ajaxcartpro-progress{
        border: none;
        position: fixed;
        text-align: center;
        padding: 0px;
        background-color: transparent;
        z-index: 999999;
        color: black;
        max-width: 200px;
        /*position:absolute;*/
        /*top: expression(parseInt(document.documentElement.scrollTop, 10) +window.ACPTop+ "px");*/
    }

Answer 1

不要使用GIF图像来创建动画，而是查看CSS3 keyframe animations并使用PNG精灵。

编辑：我认为Walsh's article很容易描述它。

首先，您需要一个像<div class="loading"></div>

这样的容器

然后，使用CSS，将其背景图像设置为包含步骤动画的精灵。基本上，这里发生的是每次刷新时只显示背景的部分，从而创建动画。浏览器除此之外什么都不做，只是按时间推送背景位置（或其他属性）：

@keyframes loadinganim {  
    0% {background-position: -6864px 0; } # starting position depending on the sprite image
    100% {background-position: 0 0;} # where should the animation end
}

.loading {
  background-image: url(images/loadingSprite.png); # path to the sprite
  animation: loadinganim 3.75s steps(44) infinite; # what's the animation called, how often it should refresh, how many steps, and for how long it should last
  # ... other attributes
}

旧版浏览器不支持此功能，因此您需要提供后备（如带背景的GIF图像）。您可能还需要在animation属性前加上前缀，以使其在Safari等浏览器中起作用：

.loading {
  animation: # ...
  -webkit-animation: # ..
  # ... other attributes
}

Answer 2

我猜它是一张GIF图片。 GIF图像不支持Alpha透明度，因此它针对白色背景进行抗锯齿处理。但是你将它叠加在一个不是白色的背景之上，所以你会看到应该与白色混合的灰色像素。

为什么ajax装载机模糊了？

2 个答案: