模糊圖像？ Chrome上沒有模糊圖片，只有IE/FF ...爲什麼？

我一直在一個網站上工作，並且我已經廣泛地使用了文本的圖片，並且看起來我不想原生html/css。正如你所看到的那樣......很容易檢測圖像中的文本是否變得模糊。模糊圖像？ Chrome上沒有模糊圖片，只有IE/FF ...爲什麼？

一切都非常清晰，並在Chrome上正常工作。但是，問題發生在頁面完成加載在IE或FF後。我的所有圖像永遠都變得模糊不清，即使它們來回縮放等等。當時，在我的大腦中，放入比所需圖片更大的圖片是有意義的，因爲它會更清晰......但我想我是完全的錯誤。希望有一位大師能很快解決這個問題。提前致謝！

爲語境一些示例代碼：

  <div id="whiteBg"> 
      <img id="birdMain" src="Pictures/bird.png" alt="title"/> 
      <img id="flowerMain1" src="Pictures/flower.png" alt="title"/> 
      <img id="flowerMain2" src="Pictures/flower.png" alt="title"/> 
      <img id="flowerMain3" src="Pictures/flower.png" alt="title"/> 
      <img id="titleMain" src="Pictures/csaname.png" alt="title"/> 
      <img id="csalogoMain" src="Pictures/csalogo.png" alt="asdf"/> 
      </div>

我想在一個絕望的嘗試修復液預加載圖像，但它還是不執行任何操作。我甚至不知道預加載的代碼行是否可以工作。

預加載代碼：

var images = new Array("Pictures/1greatwall.jpg", "Pictures/2spring-scrolls.jpg", "Pictures/3lily.jpg", "Pictures/4heavy-snow.jpg", "Pictures/5sunrise.jpg", "Pictures/6crane.jpg", "Pictures/7winding-road.jpg", "Pictures/8guqin.jpg", "Pictures/9sealflower.jpg", "Pictures/10pine.jpg", "Pictures/11huangshan.jpg", "Pictures/12dragon.jpg", "Pictures/13otters.jpg", "Pictures/1greatwall.jpg", "Pictures/14emei.jpg"); 
var imgNumber = 1; 
var numberOfImg = images.length; 
if (document.images) { 

//loads slideshow picures 
var image1 = new Image(); 
image1.src = "Pictures/1greatwall.jpg"; 
var image2 = new Image(); 
image2.src = "Pictures/2spring-scrolls.jpg"; 
var image3 = new Image(); 
image3.src = "Pictures/3lily.jpg"; 
var image4 = new Image(); 
image4.src = "Pictures/4heavy-snow.jpg"; 
var image5 = new Image(); 
image5.src = "Pictures/5sunrise.jpg"; 
var image6 = new Image(); 
image6.src = "Pictures/6crane.jpg"; 
var image7 = new Image(); 
image7.src = "Pictures/7winding-road.jpg"; 
var image8 = new Image(); 
image8.src = "Pictures/8guqin.jpg"; 
var image9 = new Image(); 
image9.src = "Pictures/9sealflower.jpg"; 
var image10 = new Image(); 
image10.src = "Pictures/10pine.jpg"; 
var image11 = new Image(); 
image11.src = "Pictures/11huangshan.jpg"; 
var image12 = new Image(); 
image12.src = "Pictures/12dragon.jpg"; 
var image13 = new Image(); 
image13.src = "Pictures/13otters.jpg"; 
var image14 = new Image(); 
image14.src = "Pictures/14emei.jpg"; 

//loads other essential background pictures... 
var image15 = new Image(); 
image15.src = "Pictures/csalogo.jpg"; 
var image16 = new Image(); 
image16.src = "Pictures/bird.jpg"; 
var image17 = new Image(); 
image17.src = "Pictures/flower.jpg"; 
var image18 = new Image(); 
image18.src = "Pictures/csaname.jpg"; 
var image19 = new Image(); 
image19.src = "Pictures/seemorename.jpg"; 
var image20 = new Image(); 
image20.src = "Pictures/seemore.jpg"; 
var image21 = new Image(); 
image21.src = "Pictures/leftarrow.jpg"; 
var image22 = new Image(); 
image22.src = "Pictures/slideshowbutton.jpg"; 
var image23 = new Image(); 
image23.src = "Pictures/rightarrow.jpg"; 
var image24 = new Image(); 
image24.src = "Pictures/logo.jpg"; 
var image25 = new Image(); 
image25.src = "Pictures/menu.jpg"; 
var image26 = new Image(); 
image26.src = "Pictures/csa.jpg"; 
}

新的Notes：

我發現圖像本身的調整大小後的清爽/窗口縮放會自動在Chrome工作，但是，這在Firefox中並非如此。剛剛測試過。這是什麼根源呢？

來源

2012-10-02 Charles

這與您的問題無關，但您爲什麼要創建所有圖像路徑的數組，以便完全忽略它並手動聲明每個圖像？ – Shmiddty

@Shmiddty因爲我實際上正在使用我預裝的大多數圖片來實現圖片幻燈片。我認爲添加15-26的圖像可以解決當時的模糊問題。 – Charles

但是，無論如何，我理解它的方式，我是否用我的photoslide節目循環播放。然而，聲明圖像部分是實際預載圖像，如果我沒有錯，因爲數組本身只是數據而不是圖像的字符串。 – Charles

應該在較新的瀏覽器版本中修復此問題。

來源

2014-07-11 22:25:23

模糊圖像？ Chrome上沒有模糊圖片，只有IE/FF ...爲什麼？

回答

相關問題