Question

我正在创建一个网页，我只剩下几件事，而这一件事对我来说是我无法理解的。我正在使用Angular来构建页面以及HTML和CSS。我的问题是，当我使用Chrome在移动浏览器中查看该页面时，背景不正确。但是我可以在Firefox中查看同一页面，它可以正常工作。我相信我已经正确设置了一切。我将粘贴一些屏幕截图和一些代码，以及我正在谈论的内容。

What it's supposed to look like

What I'm getting

看起来背景想要放大第一页。问题是，所有其他页面都没问题。背景没问题。这是相关代码：

CSS：

body {
    font-family: 'Open Sans Condensed', sans-serif;
    background: none no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-y: scroll;
    padding-top: 70px;
    transition: background ease-in-out 0.8s;
    margin-bottom: 100px;
}

Angular：

myWebsite.controller('NavController', function ($scope, $location) {
    $scope.isCollapsed = true;
    $scope.$on('$routeChangeSuccess', function () {
        $scope.isCollapsed = true;
    });

    $scope.home = function() {
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(/hsds/img/hsvwall.jpg)';        
    };
    $scope.events = function() {
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(/hsds/img/theavenue.jpg)';
    };
    $scope.dances = function() {
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(/hsds/img/theavenue.jpg)';
    };
    $scope.madjam = function() {
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(/hsds/img/theavenue.jpg)';
    };
    $scope.about = function() {
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(/hsds/img/theavenue.jpg)';
    };
    $scope.connect = function() {
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(/hsds/img/theavenue.jpg)';
    };
    $scope.learn = function() {
        var body = document.getElementsByTagName('body')[0];
        body.style.backgroundImage = 'url(/hsds/img/theavenue.jpg)';
    };

});

Navbar HTML：在这里，我拥有它，以便当用户点击链接时，它会淡化到相关背景。

<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="navbar-collapse" ng-class="isCollapsed ? 'collapse' : 'in'">
          <ul class="nav navbar-nav">
            <li ng-click="home()"><a href="#/home">HOME</a></li>
            <li ng-click="events()"><a href="#/events">EVENTS</a></li>
            <li ng-click="dances()"><a href="#/dances">MONTHLY DANCE</a></li>
            <li ng-click="madjam()"><a href="#/madjam">MADjam</a></li>
            <li ng-click="learn()"><a href="#/learn">LEARN</a></li>
            <li class="dropdown" dropdown>
            <a class="dropdown-toggle" dropdown-toggle role="button" aria-expanded="false">ABOUT <span class="caret"></span></a>
            <ul class="dropdown-menu dropdown-menu-right" role="menu">
                <li ng-click="about()"><a href="#/about">ABOUT HSDS</a></li>
                <li ng-click="about()"><a href="#/board">HSDS BOARD</a></li>

            </ul>
          </li>
            <li ng-click="connect()"><a href="#/connect">CONNECT</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->

请帮助，我不知道为什么当它在其他所有内容上工作正常时，它不适用于Chrome移动版。

添

背景图片无法在Chrome手机中使用，可在Firefox中使用

0 个答案: