Question

所以，我认为这里发生的事情是我所做的页脚没有清除背景图像并且正在覆盖它。

我已经在很多方面搞砸了这一点而且我在这一点上感到沮丧因为我似乎无法让背景图像出现！它只是一个页眉和一个页脚，它之间有一点空间（我认为它是标题的边缘）。

问题是，即使我试图在页眉和页脚之间施加一些空间，背景仍然不会出现。

我确定我只是在这里做一些迟钝的事情，如果你能解决我做错的事，请告诉我。

为了涵盖我在这里所做的事情，我希望有一个覆盖整个页面的大背景图像，以及图像上方的透明浮动框，其中包含一些信息，页眉和页脚。

如果只是将图像放在html中并将另一个DIV放在它上面，以更好的方式做到这一点，那就知道了。就像我说的那样，我确定我在这里忽略了一些迟钝的步骤，谢谢你看看。

我会在这里发布所有代码，这样就不会混淆任何代码。

HTML：

<html>
    <head>
        <title>Harley Fisher</title>
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href = "css/bootstrap.min.css" rel = "stylesheet">
        <link rel = "stylesheet" type = "text/css" href = "styles.css">
</head>

<body>
    <div class = "navbar navbar-default navbar-static-top">
        <div class = "container">
            <a href = "#" class = "navbar-brand">Harley Fisher, CRS</a>

            <button class = "navbar-toggle" data-toggle = "collapse" data-target = ".navHeaderCollapse">
                <span class ="icon-bar"></span>
                <span class ="icon-bar"></span>
                <span class ="icon-bar"></span>
            </button>

            <div class = "collapse navbar-collapse navHeaderCollapse">
                    <ul class = "nav navbar-nav navbar-right">

                        <li class = "active"><a href = "#">Home</a></li>
                        <li><a href = "#">Buy</a></li>
                        <li><a href = "#">Rent</a></li>
                        <li><a href = "#">Agents</a></li>
                        <li><a href = "#">Contact</a></li>
                        <li><a href = "#">About Us</a></li>
                </div>
            </div>
        </div>
    </div>


    <div class = "gradfoot">
        <div class="container">
            <div class="col-sm-8 col-sm-offset-2 text-center">
                <h2 class="">Contact Me</h2>

                <hr class="">
         <h4 class="">
    Harley Fisher
  </h4>


        <p><span class = "glyphicon glyphicon-map-marker" aria-hidden="true"></span>1723 S Leyden St 
Denver</p>
        <p><span class = "glyphicon glyphicon-envelope" aria-hidden="true"></span>  HarleyLFisher@gmail.com</p>
        <p><span class = "glyphicon glyphicon-earphone" aria-hidden="true"></span>  (303) 759 8811</p>
        <p><span class = "glyphicon glyphicon-print" aria-hidden="true"></span>  (303) 759 8844</p>
        <hr class="">
        <ul class="list-inline center-block">
            <li><a href="#" class=""><img src="images/fb.png" class=""></a>
            </li>
            <li><a href="#" class=""><img src="images/twit.png" class=""></a>
            </li>
            <li><a href="#" class=""><img src="images/goog.png" class=""></a>
            </li>
            <li><a href="#" class=""><img src="images/pint.png" class=""></a>
            </li>
        </ul>
    </div>
    </div>

    <script src="https://code.jquery.com/jquery-1.12.2.js"></script>
    <script src = "js/bootstrap.js"></script>       
</body>

宣布css：

body{
background-color: black;
background-image:url("images/bigbg.jpg");
height:100%;
width:100%;
}

#myCarousel{
margin-top: -20px;
z-index:1;
}

#shadowh{
text-shadow: 1px 1px black;
font-size: 50px;
}

#shadowp{
text-shadow: 1px 1px black;
font-size:20px;
}


/* navbar */
.navbar-default {
background-color: #432281;
border-color: #432281;

}
/* title */
.navbar-default .navbar-brand {
color: #cccccc;
}
.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #f2f2f2;
}
/* link */
.navbar-default .navbar-nav > li > a {
color: #c7c7c7;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #f2f2f2;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
color: #f2f2f2;
background-color: #7e46e7;
}
.navbar-default .navbar-nav > .open > a, 
.navbar-default .navbar-nav > .open > a:hover, 
.navbar-default .navbar-nav > .open > a:focus {
color: #555;
background-color: #D5D5D5;
}

   .searchbar{
max-width: 800px;
} 

label{
margin-top: 35px;
padding:10px;
color:#f2f2f2;
font-size:40px;
}

.butpad{
padding:10px;
margin-bottom:10px;
}

.rowpad{
padding:20px;
}

.stackpad{
padding:10px;
}

.carousel-inner img{
margin:auto;
}

.grad{
background:#432281;
background: -webkit-linear-gradient(#432281, #41335b); /* For Safari 5.1 to      6.0 */
background: -o-linear-gradient(#432281, #41335b); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#432281, #41335b); /* For Firefox 3.6 to 15 */
background: linear-gradient(#432281, #41335b); /* Standard syntax */

}

.gradfoot{
background:#000000;
background: -webkit-linear-gradient(#41335b, #000000); /* For Safari 5.1 to    6.0 */
background: -o-linear-gradient(#41335b, #000000); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#41335b, #000000); /* For Firefox 3.6 to 15 */
background: linear-gradient(#41335b, #000000); /* Standard syntax */
color:#9e9e9e;
}
@media (max-width: 500px) {
  #shadowh {
    font-size: 30px;
  }

  #shadowp{
      font-size: 14px;
  }

  .footh2{
      font-size:20px;
  }

  .footh4{
      font-size:16px;
  }

  .footp{
      font-size:13px;
  }

  label{
      font-size: 25px;
  }
}

谢谢你看看！

Answer 1

我已经尝试过你的代码了，这就是我得到的（只是改变了背景风格的价值）：

我的猜测是你在background-image样式

中使用了错误的路径

无法获得背景图像以显示在引导程序中，可能是页脚问题

1 个答案: