Question

我正在使用Ionic框架，我有以下CSS代码：

.witzle-bg-image {
  background-image: url('../img/home-bg.png');
  background-attachment: fixed;
  background-size: cover;
  position: fixed;
}

它完全符合谷歌Chrome浏览器的要求：它会调整大小，使背景图像始终覆盖在屏幕上。当我在我的Android上运行它时，它开始在底部重复。当我放no-repeat时，只有一个空白区域。我认为background-size:cover应该阻止它。

Answer 1

我有类似的问题，我认为你也面临同样的问题。您需要将此类放入离子内容而不是离子视图。如果你这样做，那么我们已经中了大奖。

代码段：

.scroll-content{
  background-image: url('http://www.jimatkinsonwebdesign.co.uk/wp-content/uploads/2012/03/google-chrome.jpg');
  background-attachment: fixed;
  background-size: cover;
  position: fixed;
}

附上codepen链接。希望它有所帮助!!

CSS代码在手机中表现得很奇怪，但在浏览器中却没有

1 个答案: