【问题标题】:Ionic Background image : center not working on Android离子背景图片:中心不适用于 Android
【发布时间】:2016-08-28 14:37:59
【问题描述】:

我正在升级我的 Ionic App 版本:

ionic: ionic-bower#1.2.4
ionic-platform-web-client": ^0.7.1
cordova: 6.1.1

而且升级后背景图片不居中,我的CSS代码是:

body {
    background:url('../img/splash.png') rgb(227,227,213) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

而我的正文 html 只是:

</head>
 <body ng-app="starter">
   <ion-spinner></ion-spinner>
</body>`

Ionic 可能存在错误吗?我做错了什么?

【问题讨论】:

  • 是的,您需要将背景图像提供给类 .scroll-content。

标签: html css cordova ionic-framework


【解决方案1】:

我也遇到了问题,发现了这个link

所以这里是如何在混合应用程序中为所有尺寸的设备添加背景的解决方案。所以你必须将以下内容添加到 CSS 到你的 style.css 中。您必须为滚动内容添加相同的 css,因为上面的 css 仅适用于屏幕,不适用于可滚动屏幕。

.BackgroundImage{
 background: url(image.jpg) no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size:contain;
 
}

.scroll-content{
  background: url(image.jpg) no-repeat center center fixed;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size:contain;
}

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2014-07-17
    • 1970-01-01
    • 2020-06-29
    • 2011-04-01
    • 1970-01-01
    • 2020-09-15
    • 2019-12-27
    • 1970-01-01
    相关资源
    最近更新 更多