带有完整bg图像和白色文本容器的网页

时间：2019-07-17 15:12:25

标签： html css bootstrap-4

我正在建立一个网站，我想使用整页封面背景和一个白色容器作为内容。我以为我有正确的CSS和HTML。似乎没有我想要的方式。您能帮我解决一下吗？

Here is the test page 

body {
  color: #036;
  font-family: Georgia;
  font-size: 20px
}

.masthead img {
  width: 100%;
  height: 100%;
  background: url('http://i.stack.imgur.com/jGlzr.png') no-repeat fixed center;
  background-size: cover
}

.navbar-custom {
  background-color: #0D5EAF
}

.navbar-custom .navbar-brand,
.navbar-custom .navbar-text {
  text-decoration: none;
  color: #fff
}

a.navbar-brand:link,
a.navbar-brand:visited {
  color: #0D5EAF;
  text-decoration: none;
  background-color: #fff;
  border-radius: 50%;
  padding: .5rem
}

a.navbar-brand:hover,
a.navbar-brand:focus {
  color: red;
  text-decoration: none
}

.navbar-custom .navbar-nav .nav-link {
  text-decoration: none;
  color: #fff
}

.navbar-custom .nav-item.active .nav-link,
.navbar-custom {
  text-decoration: none;
  color: #fff
}

.nav-item .nav-link:hover {
  color: #0D5EAF;
  background-color: #fff;
  border-radius: .25rem
}

.navbar-custom .dropdown-menu {
  background-color: #0D5EAF
}

.navbar-custom .dropdown-item {
  text-decoration: none;
  color: #fff
}

.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
  text-decoration: none;
  color: #0D5EAF;
  background-color: #fff
}

@media (max-width:767px) {
  nav.navbar {
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch
  }
}

.navbar-toggler {
  border-color: rgb(255, 255, 255)
}

.navbar-toggler-icon {
  color: #fff
}

.navbar-toggler-icon:hover {
  background: #fff
}

span.navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E")
}

@media (max-width:767px) {
  nav.navbar {
    max-height: 100vh;
    overflow: auto;
    -webkit-overflow-scrolling: touch
  }
}

#bg {
  background: url(../images/bg.jpg);
  background-size: cover;
  background: no-repeat center center fixed
}

a {
  color: #036;
  text-decoration: none
}

a:hover,
a:focus {
  color: red;
  text-decoration: underline
}

a {
  color: #036;
  text-decoration: underline;
  a:hover {
    color: red;
    text-decoration: underline
  }
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #036
}

.icon-background {
  color: #fff
}

.fa-facebook {
  color: #3b5998;
  font-size: 20px
}

.fa-facebook:hover {
  color: #8b9dc3
}

.fa-envelope {
  color: #9ACD32;
  font-size: 20px
}

.fa-envelope:hover {
  color: #FF8686
}

.fa-phone {
  color: red;
  font-size: 20px
}

.fa-phone:hover {
  color: #8b9dc3
}

.fa-arrow-circle-o-down {
  color: #fff;
  font-size: 20px
}

.img-fixed {
  padding-bottom: 5px
}

#myFrame {
  width: 100%;
  height: 1000px
}

.carousel-item .img-fluid {
  width: 90%;
  height: auto
}

.carousel-item a {
  display: block;
  width: 100%;
  height: auto
}

.carousel-control-prev {
  color: background-color:#3F0;
  margin-left: -2rem;
  z-index: 10;
  text-decoration: none
}

.carousel-control-next {
  color: background-color:#3F0;
  ;
  margin-right: -2rem;
  z-index: 10;
  text-decoration: none
}

.carousel-controls a:hover {
  color: 004289;
  z-index: 10;
  text-decoration: none
}

.carousel-control-prev:hover {
  color: #458B00;
  text-decoration: none
}

.carousel-control-next:hover {
  color: #458B00;
  text-decoration: none
}

.embed-responsive {
  width: 90%;
  height: auto
}

.footer {
  width: 100%;
  font-size: 1.25rem;
  margin-top: 1rem;
  text-align: center;
  overflow: visible;
  color: #fff;
  height: 2rem;
  background-color: #0D5EAF
}

.footer {
  width: 100%;
  font-size: 1.25rem;
  margin-top: 1rem;
  text-align: center;
  overflow: visible;
  color: #fff;
  height: 2rem;
  background-color: #0D5EAF
}

.footer .container {
  background-color: #0D5EAF
}

#scroll {
  position: fixed;
  right: 10px;
  bottom: 10px;
  cursor: pointer;
  width: 2.5rem;
  height: 2.5rem;
  background-color: #3F0;
  text-indent: -9999px;
  display: none;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  opacity: .75
}

#scroll span {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -8px;
  margin-top: -12px;
  height: 0;
  width: 0;
  border: 8px solid transparent;
  border-bottom-color: #fff
}

#scroll:hover {
  background-color: #3C0;
  opacity: 1;
  filter: "alpha(opacity=100)";
  -ms-filter: "alpha(opacity=100)"
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>WentworthCC.com brought to you by Samonas Realty</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <link href="css/custombs4-n.css" rel="stylesheet">
  <link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css">
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
  <link rel="manifest" href="/manifest.json">
  <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#5bbad5">
  <meta name="theme-color" content="#ffffff">
</head>

<body>
  <header class="masthead"><img src="images/Banner.jpg" id="Banner" alt="WentworthCC Logo"></header>
  <nav class="navbar navbar-custom navbar-expand-md"><button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbar-custom" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
    <div class="collapse navbar-collapse"
      id="navbarCollapse"></div>
  </nav>

  <div class="container" id="bg"><a href="javascript:void(0);" id="scroll" title="Scroll to Top" style="display: none;">Scroll To Top<span></span></a>
    <h1 class="mx-auto">Page content </h1>
    <p>Lorem Ipsum "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..." "There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..." What is Lorem Ipsum?</p>

    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum. Why do we use it?</p>

    <p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content
      here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.
      Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).</p>
  </div>
  <div class="clearfix"></div>
  </div>
  </div>
  <footer class="footer">
    <div class="container">
      <div class="text-center">Copyright &copy;
        <script>
          document.write(new Date().getFullYear());
        </script> Footer</div>
    </div>
  </footer>
  <script defer src="https://kit.fontawesome.com/593a9d194e.js"></script>
  <script defer src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script defer src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $(window).scroll(function() {
        if ($(this).scrollTop() > 100) {
          $('#scroll').fadeIn();
        } else {
          $('#scroll').fadeOut();
        }
      });
      $('#scroll').click(function() {
        $("html, body").animate({
          scrollTop: 0
        }, 600);
        return false;
      });
    });
  </script>
  <script defer src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</body>

</html>

https://ibb.co/rG7xVFd][img]https://i.ibb.co/rG7xVFd/Capture.jpg

0 个答案:

没有答案
相关问题
最新问题