Firefox背景圖像錯誤

我的Firefox行事怪異。我使用一個簡單的4x4px透明PNG作爲div背景（像往常一樣）。在Chrome瀏覽器，Safari瀏覽器，Opera甚至IE瀏覽器中看起來都不錯，但是在FF中它已經「崩潰」了。這是一張圖片，向你展示我在說什麼：http://cl.ly/2Q1l0S1u3I2Z1e3U2n0G。Firefox背景圖像錯誤

我使用圖像和漸變爲背景，但如果我只使用圖像，它會導致相同的結果。

下面是代碼：

#wrap { 
    background-color: #f5f5f5; 
    background-image: url(../images/general/bg-wrap.png); 
    background-image: url(../images/general/bg-wrap.png), -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#ebebeb)); 
    background-image: url(../images/general/bg-wrap.png), -moz-linear-gradient(top, #f5f5f5, #ebebeb); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f5f5f5', endColorstr='#ebebeb'); 
    background-position: 0 0; background-repeat: repeat; 
}

當我只用背景圖像，它看起來像這樣：

#wrap { 
    background: #f5f5f5 url(../images/general/bg-wrap) 0 0 repeat; 
}

這是BG-wrap.png：http://cl.ly/0i3i1R0P2R0i1K1h1V1P。我不明白這是怎麼回事...

來源

2012-05-16 b_benjamin

這是奇怪...

我成立了一個小提琴，並能正常工作是這樣的：http://jsfiddle.net/will/KMVvT/

你認爲它可能是什麼其他干擾？

來源

2012-05-16 11:37:39 will

有趣的是，小提琴的例子是爲我工作，但是當我複製到我的CSS文件沒有發生。也許這可能是一些問題..？ –

你有沒有花哨的CSS轉換應用？或背景大小？請記住，如果您使用背景位置，除非您使用逗號，否則您將針對每個背景圖像/漸變。 – will

會：是的，我有過渡，但我沒有過渡時嘗試過，並得到相同的結果。這很奇怪，Firefox的每一個版本（甚至2.0）都有同樣的效果，我無法弄清楚爲什麼。也許我應該使用不同的模式... –

我能想到的唯一情況是，幾年前，早期版本的Firefox無法重複太小的背景圖像（小於16x16）。

也許這是與漸變填充CSS結合時該錯誤的新化身..？

只需通過測試更大的背景圖像來排除這一點。

來源

2012-05-16 11:42:37 nealio82

我第一次想到，然後我將分辨率提高到16x16,24x24,32x32甚至64x64，沒有結果。 –

您不應該在右括號後用逗號分隔mozilla和webkit功能。圖像路徑也應該用引號括起來。

我有問題，圖像沒有顯示，但可以在FireBug中查看。原因是adblock plus擴展。禁用該頁面（或常規）後，再次顯示該頁面。

來源

2012-11-09 13:04:24

是的，我也試過這種方式，（引號和沒有逗號），但它沒有奏效。我不使用Firefox的任何擴展功能，只有在需要檢查內容時纔打開它。 –

每個人都對Firefox瀏覽器的bug和背景圖像瓷磚尺寸有所瞭解 - 我對16p x 16px的瓷磚有同樣的問題。 Nealio的回答似乎是正確的，但這不是一個解決問題的問題。相反，把你的瓷磚和字面上複製它，所以它重複自己水平和垂直，然後使用該瓷磚作爲您的背景圖像。

例如，我的背景圖片是一個非常小的「棋盤格」的簡單圖塊，它具有交替的灰色和白色方塊。第一張圖片是無限平鋪圖案的最低限度圖片，因此每個「檢查器」的尺寸爲8像素×8像素，產生16像素×16像素的背景圖像。除了 Firefox，它看起來都很好，它顯示的是與你的相同的zig zaggy鋸齒渲染。在閱讀Nealio的迴應之後，我拍了第一張圖案拼貼，並將其翻了一倍，以便它是4個檢查者x 4個檢查者（8px X 4 = 32）。

瞧！相同的背景外觀，但只是一個稍大的瓷磚。

來源

2012-11-17 01:09:54 gruntPi9

+1對我做的工作和闡述我的答案 – nealio82

Firefox背景圖像錯誤

回答

相關問題