个人中心
gpt4 book ai didi

html - 无法让背景图像出现在 Bootstrap 中，可能是页脚问题

转载 作者：行者123 更新时间：2023-11-28 06:04:17 26 4
gpt4 key购买 nike

所以，我认为这里发生的事情是我制作的页脚没有清除背景图像而是将其覆盖。

我在很多方面都搞砸了，现在我很沮丧，因为我似乎无法让背景图片出现!它只是一个页眉和一个页脚，中间有一点空间(我认为这是页眉的边距)。

问题是，即使我试图在页眉和页脚之间强制留出一些空间，背景仍然没有出现。

我确定我只是在这里做了一些弱智，如果可以的话，请告诉我我做错了什么。

为了覆盖我在这里所做的事情，我想要一个覆盖整个页面的大背景图像，以及一个透明的 float 框，上面有一些信息，一个页眉和一个页脚。

如果仅通过将图像放入 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>

annnnd 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;
  }
}

感谢您的关注!

最佳答案

我试过你的代码，这就是我得到的(只是改变背景样式的值):

enter image description here

我的猜测是您在 background-image 样式中使用了错误的路径

关于html - 无法让背景图像出现在 Bootstrap 中，可能是页脚问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36560582/

26 4 0
文章推荐： javascript - 如何绑定(bind)每次 ng-click 提交一次？
文章推荐： Java如何遍历map对象
文章推荐： C++ for 循环字符串比较逻辑存在缺陷
文章推荐： CSS 选择器获取 HTML 树中特定类的最深元素
行者123
个人简介

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

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