Question

我遇到背景图片无法正常显示的问题。当页面加载时它看起来没问题但是当你向下滚动页面时，每个100％宽度/高度面板（div）之间都有白色间隙。我已经阅读了其他有相同问题的许多问题，但他们没有任何答案，我读过的建议通过添加overflow-x：隐藏到正文，html实际上适用于iPhone，但不是为iPad ..

我想知道是否有解决方案;这是我的CSS;

.panel {
  position: relative;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: 100%;
  font-family: FranklinGothicLTCom-BkCm, "Arial Narrow", sans-serif;
  overflow: hidden;
  border: none;
  margin: 0;
}

我将此类添加到每个面板中以获取基本规格，而panel1，panel2等依此类似..

.panel2 {
  background-color: #e16429;
  background: url(../img/home/background-panel01.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  text-align: center;
  z-index: 950 !important;
}

请注意：这不会给出景观中的空白区域，但只有肖像，在iPad的肖像媒体查询下给出的类看起来像这样..

.panel2 {
    background: url(../img/home/background-panel01.jpg) no-repeat center center;
}

以下是我正在进行进一步检查的实际网站：http://bit.ly/1eGCShX

如果有人知道这个问题以及解决问题的方法，我就不会感谢你了。我一直在努力解决这个问题。祝大家度过愉快的一周。

Answer 1

我相信我可能已经通过在纵向iPad的媒体查询下的div类添加background-size：cover来回答我自己的问题。

panel2 {
     background: url(../img/home/background-panel01.jpg) no-repeat center center;
     -webkit-background-size: cover !important;
     background-size: cover !important;   
  }

我认为bg封面会从它的默认类中继承，而这个类最初已经有了背景大小的封面。我现在在我的第三个面板上有一个小边框，但主要问题是通过添加它来修复。

滚动时，全屏幕背景会在iPad上分成白色空格

1 个答案: