为什么阿贾克斯装载机模糊？

装载机有一个奇怪的模糊斑点颜色。原装加载程序看起来不像附件。请参阅附件和下面的代码。 [！[] [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");*/ 
    }

来源

2015-10-17 Haya

而不是使用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 
}

来源

2015-10-17 15:10:24 fiedlr

不是开发者:)有没有简单的方法？ – Haya

@Haya检查更新的答案;）我希望它有帮助。 – fiedlr

我猜这是一个GIF图像。 GIF图像不支持alpha透明度，所以它在白色背景下抗锯齿。但是，您将它重叠在非白色背景上，因此您会看到应该与白色混合的灰色像素。

来源

2015-10-17 15:05:48

是的。你是对的。这是一个gif图像，但相同的图像在其他网站上运行良好。任何如何解决这个问题？ – Haya

为什么阿贾克斯装载机模糊？

回答

相关问题