Question

我正在尝试使用bootstrap创建完整的图片着陆页。

工作正常，但任何其他内容都覆盖图像，而不是下面。我正在尝试在全尺寸图像下方添加卡片。我认为有额外的行可以解决这个问题。

任何建议。

<!DOCTYPE html>

<html>
    <head>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="stylesheet" type="text/css" href="style.css">
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

</head>
    <body>
        <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
          <a class="navbar-brand" href="#">Cowleys Coding Bootcamp</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarCollapse">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Link</a>
              </li>
              <li class="nav-item">
                <a class="nav-link disabled" href="#">Disabled</a>
              </li>
            </ul>
            <form class="form-inline mt-2 mt-md-0">
              <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
              <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
            </form>
          </div>
        </nav>
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div id="content" class="hidden">
                        <h1>Cowleys Coding Bootcamp</h1>
                        <h1>Start your career change today!</h1>
                        <hr>
                        <button class="btn btn-default btn-lg"><i class="fa fa-hand-o-right" aria-hidden="true"></i><a href="../Accounts/Login.php">Get Started</a></button>
                    </div><!-- /.content -->
                </div><!-- /.col-lg-12 -->
            </div><!-- /.row -->
            <div class="row">
                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                      <img class="card-img-top" src="..." alt="Card image cap">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>
                                <div class="col-md-4">
                    <div class="card" style="width: 18rem;">
                      <img class="card-img-top" src="..." alt="Card image cap">
                      <div class="card-body">
                        <h5 class="card-title">Card title</h5>
                        <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                        <a href="#" class="btn btn-primary">Go somewhere</a>
                      </div>
                    </div>
                </div>


            </div>
        </div><!-- /.container -->
    </body>
</html>

这是正在使用的外部CSS！

body {
    background: url("dublin.jpg");
    background-size: cover;
    background-position:center;
    background-repeat: no-repeat;
    font-family: Lato;
}

html {
    height: 80%;
}

#content {
    text-align:center;
    padding-top: 25%;
}

h1,h3 {
    color: white;
}

h1 {
    font-weight: 700;
    font-sze: 5em;
}

hr{
    width: 400px;
    border-top: 1px solid #f8f8f8;
    border-bottom: 1px solid rgba(0,0,0,0.2);
}

div.hidden {
    display: none
}

Answer 1

制作2个独立的容器。一个container用于背景图片和标题内容。卡片和其他内容下面有一个.header { background: url("//placehold.it/1200x700"); background-size: cover; background-position:center; background-repeat: no-repeat; } <div class="container-fluid header"> <div class="row"> <div class="col-md-12"> <div id="content"> .. </div>  </div>  </div>  </div> <div class="container"> <div class="row"> <div class="col-md-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> .. </div> </div> </div> <div class="col-md-4"> <div class="card" style="width: 18rem;"> <img class="card-img-top" src="..." alt="Card image cap"> <div class="card-body"> .. </div> </div> </div> </div> </div> 。从身体中删除背景图像。

topTrasactionConstraint.priority = 999

https://www.codeply.com/go/grOqcZoyBY

Bootstrap整页照片 - 内容覆盖不在

1 个答案: