angularjs 背景问题。背景和页脚之间的差距很大。图像调整大小不会改变任何东西

Question

您好，我正在尝试为 angularjs 网站设置背景图片。我已经关注了很多 tutorials/examples。他们确实工作。但是，我希望将我的背景图片设置在视图后面页脚上方的页面底部 ，而不影响顶部的视图。 一些建议没有帮助。

罪魁祸首是这里的这个缺口..它阻止了背景进入底部......我不知道代码中的什么地方导致了这个.. 。有人知道吗？它不是页脚，因为我已经将其注释掉并且差距仍然存在。

我已经尝试将 div 和图像大小填充为 100% 和 100% width/height...没有效果。

这是完整的背景

如您所见，下半部分不见了。

如果我在 css 中使用 background-image...它会裁剪背景并强制它留在顶部而不是底部。

我也试过使用 div 并用背景填充它

   .form-wrapperBack {
    width: 100%;
    height: 100%;
    font-size: 14px;
    text-align: center;
    color: #bfbfbf;
    font-weight: bold;
    background: #fff;
    font-family: Arial;

 background-image: url("/img/river.png");
  background-repeat: no-repeat;
   background-height: 100%;
   background-position: center bottom;

请看我在 css 中设置背景时的效果图：

/* general settings */
html {
  min-height:100%;
  overflow-x:hidden;
  overflow-y:scroll;
  position:relative;
  width:100%;
background-color:#000;

}
body {
  background-color:000;
  font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
  color:#FFF;
  font-weight:100;
  margin:0;
  min-height:100%;
  width:100%;



}

这是index.html

<html ng-app="financeApp">
  <head>
    <meta charset="utf-8">
    <!-- CSS -->


<!--<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">-->
<!--  <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />-->
 <link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.0/css/font-awesome.css" />

<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />


</head>
  <!-- HEADER AND NAVBAR -->
  <header>





    <div class="wrap">
      <!-- logo -->

       <a href="#!"><img class="logo" src="img/history_00.png" /></a>
  <h7>Building lasting relationships<h7>

</header>


<body>
<ng-controller = "demoCtrl">

<ul class="nav nav-pills pull-right">



      <li ng-class="{active: isState('home') }">
        <a ui-sref="home">Home</a>
      </li>
      <li ng-class="{active: isState('form') }">
        <a ui-sref="form">Join Us</a>
      </li>
       <li ng-class="{active: isState('about') }">
        <a ui-sref="about">About</a>
      </li>
       <li ng-class="{active: isState('invest') }">
       <a ui-sref="invest">Investments</a>
      </li>





      <li ng-class="{active: isState('contact') }"> </div>
        <a ui-sref="contact">Contact</a>
      </li>

 <li ng-class="{active: isState('login') }">
       <a ui-sref="login">log In</a>
      </li>

 <li ng-class="{active: isState('logout') }">
       <a ui-sref="logout">log Out</a>
      </li>


    </ul>
    <h3 class="text-muted">          </h3>
    <br>
</div>



<div id="back-Img3">


<div ui-view class=""></div>


<br>





</div>








<!-- Loading the Footer -->
  <div id="footer" ng-include="'partials/footer.html'"></div>







   <!-- App JS -->

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular.min.js"></script>
 <script src="js/rg-slider.min.js"></script>

 <script src="js/script.js"></script>
    <script data-require="ui-router@0.2.10" data-semver="0.2.10" src="https://rawgit.com/angular-ui/ui-router/0.2.10/release/angular-ui-router.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.6/angular-animate.js"></script>
    <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

 <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"> </script>
<script src="js/controllers/controllers.js"></script>
<script src="js/directives/directives.js"></script>


<script src="js/dialogs.js"></script>

 <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

如果我编辑 css 并更改图像大小...它也会更改我不想要的视图大小。

style.css

/* general settings */
html {
  min-height:100%;
  overflow-x:hidden;
  overflow-y:scroll;
  position:relative;
  width:100%;
background-color:#000;
}
body {
  background-color:000;
  font-family:"Verdana", sans-serif; color:#c4c4c4; font-size:16.0px; line-height:1.19em;
  color:#FFF;
  font-weight:100;
  margin:0;
  min-height:100%;
  width:100%;
}


div[back-img3]{
    width: 100%;
    height:500px;
    color: #fff;
}

而且它只显示了背景的一部分...不是全部。

还有其他方法可以在 index.html 中设置图像背景吗？

不胜感激。

Answer 1

您应该固定 .form-wrapperBack 的位置，确保它具有 100% 的宽度和高度，并保持在页面顶部并将 background-size 设置为 cover：

.form-wrapperBack {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    background-image: url("/img/river.png");
    background-size: cover;
}

我用一些随机图片为你制作了 a fiddle。

如果上述任何规则不适用，则必须由另一个具有更强选择器的 css 规则覆盖。您可以通过在现代浏览器中检查元素并删除该规则或使您的选择器更强大来轻松找到它。

Answer 2

div[back-img3]{
    width: 100%;
    height:500px;
    color: #fff;
}

如果您将图像声明为该特定图片的背景div，它始终为 500 像素并且背景会被裁剪以适合该背景。

尝试为正文元素添加背景

background:src('file_path');
background-size:cover;

你这里也有一点错别字：

body {
  background-color:000;

angularjs 背景问题。背景和页脚之间的差距很大。图像调整大小不会改变任何东西

angularjs background issues. large gap between background and footer. Image resizing doesn't change anything

html

css

image

angularjs