[英]A repeat-y background-image disappears/misaligns when zooming out
在Firefox上縮小到40%時,圖像會消失。 直到縮放50%,它很好。 然而,在縮放40%時,它只是消失了:
在Chrome中,圖像仍然可見,但稍有不對齊,這種情況發生在不同的縮放級別:
一旦Internet Explorer實際顯示預期結果,無論縮放!
什么是三叉戟對webkit和gecko采取不同的做法 ,我該如何修補它?
以下是所有相關代碼:
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>
使你的body.png圖像高20像素左右將解決問題。 1px重復圖像有時會很奇怪。 在加載元素時應該有助於重繪/閃爍。
此外,將“#main:before”設置為頂部-112px而不是-113px時放大Chrome中的時髦線(至少對我而言)。
希望有所幫助。
我不確定,但我相信如果你拆分圖像並制作3個部分::: before(白色頂部,底部陰影):: header(紅色框):: after(白色底部,頂部陰影來自紅色框)
我希望這個答案有所幫助!
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.