爲什麼阿賈克斯裝載機模糊？

裝載機有一個奇怪的模糊斑點顏色。原裝加載程序看起來不像附件。請參閱附件和下面的代碼。 [！[] [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

爲什麼阿賈克斯裝載機模糊？

回答

相關問題