Question

我一直在为我的一个家庭成员开发一个网站，我将页面拆分成列并包含在div元素中，

但我无法弄清楚如何让列位于滚动背景图像的中心位置

如果我将背景div元素放在页面底部，它会将背景放在页脚和所有列之间的底部，

如果我把它放在列之前，它只是将图像放在列的上方。

如何让列以背景图像为中心？

继承了html页面和CSS文件，

（CSS中的一些元素用于另一页上的img库）：

* {
  box-sizing: border-box;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 15px solid orange;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

h1 {
  text-align: center;
}

.header {
  background-color: white;
  border: 15px solid orange;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #FFD700;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.menu li:hover {
  background-color: #DAA520;
}

.aside {
  background-color: orange;
  padding: 15px;
  color: white;
  text-align: center;
  font-size: 14px;
  box-shadow: box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}

.footer {
  background-color: orange;
  color: white;
  text-align: center;
  font-size: 12px;
  padding: 15px;
}


/* for mobile phones */

[class*="col-"] {
  width: 100%;
}

@media only screen and (min-width: 600px) {
  /*for tablets */
  .col-m-1 {
    width: 8.33%;
  }
  .col-m-2 {
    width: 16.66%;
  }
  .col-m-3 {
    width: 25%;
  }
  .col-m-4 {
    width: 33.33%;
  }
  .col-m-5 {
    width: 41.66%;
  }
  .col-m-6 {
    width: 50%;
  }
  .col-m-7 {
    width: 58.33%;
  }
  .col-m-8 {
    width: 66.66%;
  }
  .col-m-9 {
    width: 75%;
  }
  .col-m-10 {
    width: 83.33%;
  }
  .col-m-11 {
    width: 91.66%;
  }
  .col-m-12 {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  /* for desktop */
  .col-1 {
    width: 8.33%;
  }
  .col-2 {
    width: 16.66%;
  }
  .col-3 {
    width: 25%;
  }
  .col-4 {
    width: 33.33%;
  }
  .col-5 {
    width: 41.66%;
  }
  .col-6 {
    width: 50%;
  }
  .col-7 {
    width: 58.33%;
  }
  .col-8 {
    width: 66.66%;
  }
  .col-9 {
    width: 75%;
  }
  .col-10 {
    width: 83.33%;
  }
  .col-11 {
    width: 91.66%;
  }
  .col-12 {
    width: 100%;
  }
}

.active {
  background-color: #FF6347;
}

div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
  background-color: white;
}

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
}

@media only screen and (max-width: 700px) {
  .responsive {
    width: 49.99999%;
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

.fixed-bg {
  background-image: url("IMG_0174.jpg");
  min-height: 500px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  margin: 0;
  padding: 0;
  z-index: -1;
}

div.container-fluid {
  position: relative;
  border: 10px solid orange;
  margin: 0;
  padding: 0;
}

<html lang="en-US">

<head>
  <title>Rellim Nievk Photography©</title>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=devide-width, initial-scale=1.0" />
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="kevin1.css">
</head>

<body>

  <div class="header">
    <h1>Rellim Nievk Photography©</h1>
  </div>


  <div class="row">

    <div class="col-3 col-m-3 menu">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="https://www.instagram.com/rellim_nivek_/">Instagram</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>

    <div class="col-6 col-m-9">
      <p class=>Rellim Nievk Photography© is a photographer working out of north central Connecticut. His predominant field of expertise is automotive photography at car shows and events in and around the northeast part of the United States. He also does lots of
        general artistic photography of things like people and scenery. You may view his portfoilo here on the website, as well as on his instagram <a href="https://www.instagram.com/rellim_nivek_/">here</a></p>
    </div>


    <div class="col-3 right col-m-12 right">
      <div class="aside">
        <h2>INSERT TEXT HERE</h2>
        <p>Insert Text heer</p>
        <h2>INSERT THE TEXTS HERR YO</h2>
        <p>oooooweeee forrmatting tests!!!</p>
      </div>
    </div>

  </div>

  <div class="fixed-bg"></div>

  <div class="footer">
    <p>©2017 Rellim Nievk Photography</p>
  </div>


  <div class="clearfix"></div>


</body>


</html>

任何帮助建议或见解都会被大大提升！

Answer 1

如果要将列垂直居中，请使用引导容器。总是使用容器 - ＆gt;行 - ＆gt;柱。那是自助结构。

<div class="container">
    <div class="row">
        <!-- your content here -->
    </div>
</div>

获取背景图像以在我的其他<div>列后面滚动

1 个答案: