使背景图像滚动到我的其他图像后面 <div> 列

Question

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

但我不知道如何使列居中放置在滚动背景图像上方，

如果我将background 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

如果要使列垂直居中，请使用引导容器。 始终使用容器->行->列。 这就是引导结构。

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