Javascript 背景图像不适用于Chrome mobile，适用于Firefox

我正在创建一个网页，我只剩下几件事了，而这件事对于我的一生来说我无法理解。我使用Angular与HTML和CSS一起构建页面。我的问题是，当我使用Chrome在移动浏览器中查看页面时，背景不正确。不过，我可以在Firefox中查看相同的页面，它会很好地工作。我相信我把一切都安排好了。我将在下面粘贴一些截图和一些我所说的代码

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

CSS:

角度：

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)';
    };

});

导航栏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手机上不起作用，而它在其他方面都很好

---

Tim

您需要创建一个。在SO上使用JSFIDLE/codepen或提供的代码段工具。我们需要代码的输出，而不是输入来帮助您。这样，我们可以检查并告诉您需要调整哪个元素的CSS属性以修复您的问题。很抱歉，您可以访问www.timmcintre.org/hsdsI网站，但我无法复制您的问题。你在用什么设备？什么版本的Chrome？有Chrome Windows、Chrome Mac、Chrome Android平板电脑、Chrome Android手机、Chrome iPhone和Chrome iPad。总之，简写中背景属性的正确顺序是：

color | image | repeat | attachment | position

。所以它应该是

黑色，不重复固定中心
。但是，它似乎不会改变背景的渲染方式。我假设您知道您正在为不同的设备加载不同的BG，对吗？您可能希望将
body{height:100vh；overflow-y:auto；}
添加到CSS中。这可能会解决它。您已将
背景大小设置为覆盖，当您有少量内容时，仅在内容下方绘制图像。所以你需要在整个屏幕上都画出来。我可能会尝试一下，我暂时把它修复了，只去掉了一个“背景尺寸：封面”，并把它作为一个固定的背景。这就是为什么你现在不能复制它。我还创建了一个移动图像。我想看看100vh是否能用。谢谢各位
<!-- 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 -->