Question

我有一个页面加载，图像作为背景。在应用程序的第一次启动时，弹出一个ons-dialog并询问用户一些信息。当它弹出时，它背后的页面似乎是背景css，每次都没有正确加载。

有时候背景图片（自ons-dialog不是全屏可见）正确加载。其他时候它会以完整尺寸加载图像，并且不会根据我的css重新调整大小。

我的css for thes-page（弹出窗口后面）：

.details-content{
    background-image: url('images/bg_beer.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
}

显示我的对话框的代码：

ons.ready(function() { $scope.show('welcomePopup.html'); });

任何帮助，为什么我的css并不总是在ons.ready（）被激活时加载，修复或解决方法将非常感激。

编辑1：

角度控制器：

app.controller('homeCon', function($http, $scope, $compile, $sce, $window, filterFilter, $timeout){

            document.addEventListener("show", function(event){
                                      if (event.target.id == "myMainPage") {

                                      $scope.show('welcomePopup.html');
                                      }
                                      },false);
...
...
};

我的首页HTML：

.details-content{
    background-image: url('images/bg_beer.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: center;
    background-size: cover; }
     </style>

<ons-page class="transparent" ng-controller="homeCon" id="myMainPage"> <ons-toolbar modifier="transparent">
    <div class="right">
      <ons-toolbar-button><ons-icon icon="ion-ios-location" style="color: white; font-size: 28px;"></ons-icon></ons-toolbar-button>
    </div>
    <div class="left">
      <ons-toolbar-button ng-click="menu.toggle()"><ons-icon icon="fa-bars" style="color: white; font-size: 28px;" fixed-width="false"></ons-icon></ons-toolbar-button>
    </div>   </ons-toolbar> <div> <div class="details-content glass">
      <div class="welcome" style="top:30%">
      <img src="images/bm_logo.png" width="66%">
      </br>
      <div ng-view>
          <ons-button modifier="quiet" style="color:white" ng-click="openFB()"><i class="fa fa-facebook-square fa-3x"></i></ons-button>
          <ons-button modifier="quiet" style="color:white" ng-click="openInsta()"><i class="fa fa-instagram fa-3x"></i></ons-button>
          <ons-button modifier="quiet" style="color:white" ng-click="openTwitter()"><i class="fa fa-twitter-square fa-3x"></i></ons-button>
      </div>
    </div>   </div> <div>

</ons-page>

Answer 1

我不确定为什么CSS无法保持一致。它可能是渲染精灵的方式，也可能是附加到DOM和绘制精灵的计时问题。尝试一下，看看会发生什么，我很好奇（JS不是Angular - 对不起）：

document.addEventListener("init", function(event){
    if (event.target.id == "myMainPage") { 
        $scope.show('welcomePopup.html');
      } 
},false);

基本上，在页面加载和附加之前，它不会被激活，所以希望CSS是最终的，然后是弹出窗口。

角度css无法正确加载

1 个答案: