Fatal编程技术网
  • javascript/
  • Javascript 正在重叠的ng视图的背景

Javascript 正在重叠的ng视图的背景

javascript html css angularjs

Javascript 正在重叠的ng视图的背景,javascript,html,css,angularjs,ng-view,Javascript,Html,Css,Angularjs,Ng View,我用angular JS制作了一个单页网站。有两个页面通过路由链接，内容呈现为全屏ng视图。对于每个路由，我都将一个新类应用于ng视图以更改页面的背景。这很好，背景是固定的，正如预期的，但一旦我滚动页面黑色背景开始重叠的图像。以下是截图： 当我不滚动时，您可以看到背景完好无损，看起来非常完美： 当我滚动时，黑色背景开始覆盖下面的图像形式： index.html： <!DOCTYPE html> <html ng-app="mainApp"> <head lang

我用angular JS制作了一个单页网站。有两个页面通过路由链接，内容呈现为全屏ng视图。对于每个路由，我都将一个新类应用于ng视图以更改页面的背景。这很好，背景是固定的，正如预期的，但一旦我滚动页面黑色背景开始重叠的图像。以下是截图：

当我不滚动时，您可以看到背景完好无损，看起来非常完美：

当我滚动时，黑色背景开始覆盖下面的图像形式：

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>
trimmed 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';
});
非常感谢你的帮助

如果您正在尝试制作一个已修复且不会滚动的全屏图像，请尝试执行以下操作：

<!-- Put image on page instead -->
<div class="my-background-div">
  <img class="my-background-img" src=""http://playlifeproject.com/img/bg.jpg" />
</div>
或者，您可以将这些相同的样式直接应用于图像，但由于我不喜欢潜在地扭曲图像纵横比，因此我在容器上执行此操作。

如果您尝试执行固定且不会滚动的全屏图像，请尝试执行以下操作：

<!-- Put image on page instead -->
<div class="my-background-div">
  <img class="my-background-img" src=""http://playlifeproject.com/img/bg.jpg" />
</div>
或者，您可以将这些相同的样式直接应用于图像，但由于我不喜欢潜在地扭曲图像纵横比，所以我在容器上执行此操作。

侧注：您应该使用
1.11.0/jquery.min.js
而不是
1.10.2/jquery.min.js
，否则您的控制台可能会生成“不推荐使用/@指示sourceMappingURL杂注。改用//#“@Fred ii-谢谢你指出这一点，我会改变的！不客气。我刚开始学习，有个小问题。当我检查控制台时，我看到了那条信息。虽然它不会破坏您的代码，但会抛出令人恼火的警告。旁注：您应该使用
1.11.0/jquery.min.js
而不是
1.10.2/jquery.min.js
，否则您的控制台可能会生成“使用/@来指示sourceMappingURL pragmas已被弃用。请改用//#”。@Fred ii-谢谢您指出这一点，我会改变的！不客气。我刚开始学习，有个小问题。当我检查控制台时，我看到了那条信息。虽然它不会破坏你的代码，但会抛出恼人的警告。背景已经固定且全屏显示，真正的问题是当我向下滚动时，背景仍然固定，但从下方开始覆盖黑色。是的，你的背景是固定的，但它也滚动吗？看到我的措辞“这是固定的，不会滚动”…是的，背景不会滚动，但页面会。不管怎样，我知道问题出在哪里了。当我做
bottom时：0
对于
ng视图
它将背景固定在屏幕底部，但当
ng视图
的长度大于屏幕时，背景图像与重叠内容的黑色背景重叠。所以我删除了
bottom:0问题消失了。背景已经固定，全屏显示，真正的问题是当我向下滚动时，背景仍然固定，但从下方开始覆盖黑色。是的，你的背景是固定的，但它也滚动吗？看到我的措辞“这是固定的，不会滚动”…是的，背景不会滚动，但页面会。不管怎样，我知道问题出在哪里了。当我做
bottom时：0
对于
ng视图
它将背景固定在屏幕底部，但当
ng视图
的长度大于屏幕时，背景图像与重叠内容的黑色背景重叠。所以我删除了
bottom:0问题就消失了。

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