Question

我创建了一个带有角度JS的单页网站。有几页通过路由链接，内容被呈现为全屏ng视图。对于每个路线，我将新类应用于ng-view以更改页面的背景。这工作正常，背景是按预期固定的，但是一旦我滚动页面，黑色背景开始重叠图像。这是截图：

当我不滚动时，你可以看到背景完好无损并且看起来很完美：

一旦我滚动，黑色背景开始重叠下面的图像形式：

的index.html：

<!DOCTYPE html>
<html ng-app="mainApp">
<head lang="en">
    <meta charset="utf-8">
    <title>Playlife Project</title>
    <!-- styles -->
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <!-- scripts -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.28//angular-route.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-animate.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<header>
    <div id="logo"><a href="#/"><img src="img/logo.png" class="logo img-responsive" /></a></div>
    <div id="nav" class="menu">
        <ul>
            <li class="menu-item"><a href="#/podcast">Podcast</a></li>
            <li class="menu-item"><a href="#/record">Record Label</a></li>
            <!--<li class="menu-item"><a href="#/live">Live Act</a></li>-->
            <li class="menu-item"><a href="#/about">About</a></li>
            <li class="menu-item"><a href="#/contact">Get In Touch</a></li>
            <li class="menu-item"><a href="#">Shop</a></li>
            <li class="mobile-menu-item"><i class="fa fa-2x fa-bars"></i></li>
        </ul>
    </div>

    <div id="drawer" class="mobile-menu">
        <ul>
            <li><a href="#/podcast">Podcast</a></li>
            <li><a href="#/record">Record Label</a></li>
            <li><a href="#/live">Live Act</a></li>
            <li><a href="#/contact">Get In Touch</a></li>
        </ul>
    </div>

</header>

<div ng-controller="homeController" class="{{pageClass}}" ng-view></div>


<footer>
    <div id="subscribe">
        <form name="newsletter">
            <input class="inp" type="email" name="email" id="email" placeholder="Be a part of the journey">
            <input class="button" type="button" name="button" id="button" value="GET ON BOARD">
        </form>
    </div>
    <div id="social">
        <ul class="social-icons">
            <li><a href="" target="_blank"><img src="img/facebook.png" /></a></li>
            <li><a href="" target="_blank"><img src="img/soundcloud.png" /></a></li>
            <li><a href="" target="_blank"><img src="img/twitter.png" /></a></li>
            <li><a href="" target="_blank"><img src="img/youtube.png" /></a></li>
            <li><a href="" target="_blank"><img src="img/instagram.png" /></a></li>
        </ul>
    </div>
</footer>

<script type="text/javascript" src="script/main.js"></script>
<script type="text/javascript" src="script/script.js"></script>
</body>
</html>

我的样式表的一部分与问题（SCSS）有关：

/* basic reset */

*{
  margin:0;
  padding:0;
  font-size: 100%;
}

body{
  background: black;
}

a:link, a:visited, a:hover, a:active{
  text-decoration: none;
  color: #f9f9f9;
}

ul{
  list-style: none;
}

/* mixins */

@mixin background-size($size) {
  -webkit-background-size: $size;
  -moz-background-size: $size;
  -o-background-size: $size;
  background-size: $size;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

/* background */

.page{
  position:absolute;
  bottom:0;
  top:0;
  width:100%;
  z-index: 1;
}

.page-home {
  background: url("http://playlifeproject.com/img/bg.jpg") no-repeat center top fixed;
  @include background-size(cover);
}

.page-podcast {
  background: url("../img/podcast.jpg") no-repeat center center fixed;
  @include background-size(cover);
}

.page-record {
  background: url("../img/record.jpg") no-repeat center center fixed;
  @include background-size(cover);
}

.page-about {
  background: black;
}

/*
.page-live {
  background: url("../img/live.jpg") no-repeat center center fixed;
  @include background-size(cover);
}
*/

.page-contact {
  background: url("../img/contact.jpg") no-repeat center center fixed;
  @include background-size(cover);
}

修剪了main.js：

var mainApp = angular.module("mainApp", ['ngRoute', 'ngAnimate']);

/* page routing */

mainApp.config(function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl: 'views/home.html',
            controller: 'homeController'
        })
        .when('/podcast', {
            templateUrl: 'views/podcast.html',
            controller: 'podcastController'
        })
        .when('/radio/:id', {
            templateUrl: 'views/radio.html',
            controller: 'radioController'
        })
        .when('/record', {
            templateUrl: 'views/record.html',
            controller: 'recordController'
        })
        .when('/album/:id', {
            templateUrl: 'views/album.html',
            controller: 'albumController'
        })
        .when('/about', {
            templateUrl: 'views/about.html',
            controller: 'aboutController'
        })
        .when('/contact', {
            templateUrl: 'views/contact.html',
            controller: 'contactController'
        })
        .otherwise({
            redirectTo: '/'
        });
})

/* home controller */

.controller('homeController', function($scope, $timeout) {
    $scope.pageClass = 'page page-home';
})

.controller('podcastController', ['$scope', 'podcast', function($scope, podcast) {
    $scope.pageClass = 'page page-podcast';    
}])

.controller('radioController', ['$scope', '$routeParams', 'podcast', function($scope, $routeParams, podcast) {
    $scope.pageClass = 'page page-podcast';
}])

.controller('recordController', [ '$scope', 'record', function($scope, record) {
    $scope.pageClass = 'page page-record';
}])

.controller('albumController',['$scope','$routeParams', 'record', function($scope, $routeParams, record){
        $scope.pageClass = 'page page-record';
}])

.controller('aboutController', function($scope) {
    $scope.pageClass = 'page-about';
})

.controller('contactController', function($scope) {
    $scope.pageClass = 'page page-contact';
});

非常感谢您的帮助！

Answer 1

如果您尝试制作已修复且无法滚动的全屏图像，请尝试执行以下操作：

<!-- Put image on page instead -->
<div class="my-background-div">
  <img class="my-background-img" src=""http://playlifeproject.com/img/bg.jpg" />
</div>

并添加此CSS：

.my-background-div {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

或者，您可以将相同的样式直接应用于图像，但由于我不希望扭曲图像宽高比，我会在容器上进行。

ng-view重叠的背景

1 个答案: