个人中心
gpt4 book ai didi

javascript - ng-view 的背景被重叠

转载 作者：行者123 更新时间：2023-11-28 06:36:19 25 4
gpt4 key购买 nike

我用 Angular JS 制作了一个单页网站。有几个页面通过路由链接，内容被渲染到全屏 ng-view。对于每条路线，我都会向 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);
}

trim 后的 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>

并添加此 CSS:

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

或者，您可以将相同的样式直接应用于图像，但由于我不喜欢潜在地扭曲图像的长宽比，所以我在容器上执行此操作。

关于javascript - ng-view 的背景被重叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34256069/

25 4 0
文章推荐： 带边框的 CSS 问题
文章推荐： c++ - 检查容器元素之间关系的 googletest 匹配器
文章推荐： html - 有东西将我的下拉导航栏向右移动
文章推荐： c++ - 如何保存 TRichEdit 文本 RTF 的特定部分(c++ codegear)
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com