縮小時，repeat-y背景圖像消失/未對齊

在Firefox上縮小至40％時，圖像消失。一直到變焦50％，都沒問題。然而，在縮放40％，它只是消失：縮小時，repeat-y背景圖像消失/未對齊

而在Chrome瀏覽器中的圖像仍清晰可見，但稍有錯位，這發生在不同的縮放級別：

這一次Internet Explorer的實際顯示無論變焦的預期結果！

什麼是三叉戟做不同的webkit和壁虎，我該如何修補它？

這裏是所有相關代碼：

body { 
 
    background-color: rgba(31, 59, 8, 1); 
 
} 
 
#main { 
 
    z-index: 1; 
 
    position: absolute; 
 
    top: 113px; 
 
    left: 50%; 
 
    width: 900px; 
 
    height: 100%; 
 
    margin-top: 160px; 
 
    background-image: url('http://i.stack.imgur.com/zZCB2.png'); 
 
    background-repeat: repeat-y; 
 
    margin-right: -50%; 
 
    text-align: center; 
 
    transform: translateX(-50%); 
 
} 
 
#main:before { 
 
    content: " "; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: -113px; 
 
    background-image: url('http://i.stack.imgur.com/7DE7i.png'); 
 
    background-repeat: no-repeat; 
 
    width: 900px; 
 
    height: 113px; 
 
} 
 
#main:after { 
 
    content: " "; 
 
    position: absolute; 
 
    left: 0px; 
 
    bottom: -200px; 
 
    background-image: url('http://i.stack.imgur.com/DVJAq.png'); 
 
    background-repeat: no-repeat; 
 
    width: 900px; 
 
    height: 200px; 
 
}

<div id="main"></div>

來源

2015-10-17 jaunt

您使用的是哪種版本的Chrome和Firefox？我沒有在Windows上嘗試過，但在我的Mac上同時使用了Chrome和Firefox，它的加載是正確的。 – loganfarr

Chrome 43,45,46和Firefox 38（我認爲它是32？）都在Windows 8.1上顯示了這種行爲。這些都是非常隨機的版本tbh，我只是在更新瀏覽器時進行測試;我希望有一個補丁，但問題一直存在。 – jaunt

w10以下的最新Firefox不會重現您的問題。它工作得很好。無論如何，即使這些日子瀏覽器比以前更好用，使用px時，我仍儘量避免使用奇數。它經常與佈局混雜在一起（在你的案例中，頂部值爲113px） –

讓您body.png圖像20px的高大左右會解決這個問題。 1px重複圖像有時會表現奇怪。在元素加載的同時應該幫助重繪/閃爍。當你放大（至少對我來說）時，將「#main：之前」設置爲-112px而不是-113px的頂部擺脫了Chrome中的時髦線條。

希望有所幫助。

來源

2015-10-26 21:57:59 maximo

雖然20px解決方案是一個很好的方法，但我打算在頁面上垂直增長/縮小對象，並且頁面的大小不會太好。感謝您對定位的建議，因爲圖像高度爲113px，會導致1px重疊，所以我只需更改圖像的大小。我更好奇爲什麼這不會發生在IE瀏覽器中，但在更流行的瀏覽器中卻比我實際的解決方案要好;任何解釋與解釋是非常感謝，雖然:) – jaunt

我不知道，但我相信的，如果你分割圖像及製作3個部分： ::之前（白色上衣，與底部陰影） ::頭（紅色框） ::後（白色底，從紅框中選擇頂部的影子）

我希望這個答案有幫助！

來源

2015-10-31 15:38:03

你可以有':: before :: before'？通過使用帶僞類選擇器':: before'的圖像來定義頭部，這是比較好的，因爲它允許較舊的瀏覽器版本將其與現代瀏覽器完全相同。 – jaunt

對不起，對於遲到的答案，但我相信工作。當談到這個時，我現在不是proffesional：D –

縮小時，repeat-y背景圖像消失/未對齊

回答

相關問題