background-size：webkit中的掩蓋缺陷

在我看來，webkit中存在一個bug，可能是舍入問題，導致background-size屬性在設置爲cover時無法覆蓋整個元素。background-size：webkit中的掩蓋缺陷

的jsfiddle：http://jsfiddle.net/um4cQ/（嘗試調整結果區域，如果你沒有看到紅色背景顯示在左邊或頂部通過）。

我見過一些有關網絡錯誤的參考，some dating back to 2011，但我還沒有聽到任何開發人員的消息。更重要的是暫時的，如果有CSS解決方法（不使用JavaScript）。

有沒有人找到一個可行的解決方法呢？

2013-07-23 Godwin

這不是一個解決方案 - 但如果你處於困境中，你可以使用'background-repeat：repeat;'來使問題稍微不明顯。 – potench

'background-origin：border-box'似乎有幫助，至少對於這個例子中的薄邊框來說。 –

是的，打我吧...它看起來像'border-box'使圖像覆蓋在邊界後面，所以邊框阻止了舍入誤差。 – potench

我添加了供應商前綴並修復了一些圖片，然後我將background:分爲顏色和無重複的簡寫規則。這固定了一些圖像，但不是全部，所以我注意到它與圖像尺寸有關，我對所有圖像使用了相同的圖像（這是工作），它的工作。

所以你的圖像的寬高比在這裏有一些事情要做，我想這是因爲background-size: cover;試圖通過搞亂縱橫比來扭曲圖像。

Here's my fiddle working ...只是重做你的圖像，使他們有一個縱橫比，將適合它的容器適當。

2013-07-24 00:34:15 sulfureous

不在我的機器上（Chrome + Windows 8），但我現在看到紅色顯示在右側或底部，而不是左側或頂部。 – Godwin

你是說你有另一個版本，你讓所有'figure'元素具有相同的背景圖片？ – Godwin

對不起所有的評論，但重新閱讀它似乎很清楚，這就是你說的。在特定情況下再次解決問題的另一種方式是，當您無法控制圖像時（例如上傳的內容），會發生什麼情況？ – Godwin

回答