具有背景图像问题的引导容器答案

【问题标题】：Bootstrap container with background img issue具有背景图像问题的引导容器
【发布时间】：2019-01-02 12:09:08
【问题描述】：

我有一些简单的 HTML 和 CSS 代码，我想要一个带有类容器的 div，并且这个 div 需要有一个 img 作为背景。在那个父 div 里面，我有一个带有类行的潜水，在里面我有 2 个 div 类：class="col-md-3" 和 col-md-9。

问题是现在子 div 没有显示容器 div。

换句话说，我希望我的容器 div 成为背景，并且所有内容都显示在它上面。

有什么建议吗？

HTML：

<div class="container bckgroud">
  <div class="row">
    <div class="col-md-3">
      <h1>here is test for the me</h1>
    </div>
  <div class="col-md-9"></div>
  </div>
</div>

CSS：

body, html {
  background-color: #071a0f;
}

h1 {
  color: aqua;
}

.bckgroud {
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
  background-image: url("../images/backg.png");
  background-size: contain;
  background-repeat: no-repeat;
  padding-top: 66.64%; 
  /* (img-height / img-width * width) */
  /* (853 / 1280 * 100) */                
}

实际结果：

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

你的意思是这样的？设置您的容器height: 100vh; 并删除填充，它将div推到底部

@charset "utf-8";
/* CSS Document */

 body,hmtl{

background-color: #071a0f;  
margin: 0;
}

h1{

color: aqua;
}


.bckgroud{

  width: 100%;
  height: 100vh;

  background: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1));
  background-image: url("https://cdn.hasselblad.com/c81e7ee74fdc106a965f51b35c8dd87503a16f0e_tom-oldham-h6d-50c-sample1.jpg");
  background-size: contain;
  background-repeat: no-repeat;


}

<div class="container bckgroud">
   <div class="row">
       <div  class="col-md-3">
           <h1>
               here is test for the me
           </h1>
       </div>
       <div  class="col-md-9"></div>
   </div>
</div>

【讨论】：

【解决方案2】：

可能是这样的：

body {
  background-color: #071a0f;  
}

h1 {
  color: aqua;
}

.bckgroud {
  height: 100vh;
  background-image: linear-gradient(rgba(255,255,255,.1), rgba(255,255,255,1)), url("https://i.stack.imgur.com/tAAGm.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

【讨论】：

【解决方案3】：

body, html {
  color: white !important;
}
.bckgroud{
  background-image: url("https://i.stack.imgur.com/tAAGm.jpg");
  background-size: cover;
 }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container bckgroud">
     <div class="row">
         <div  class="col-3">
             <h1>
                 here is test for the me
             </h1>
         </div>
         <div  class="col-9">
          Foo
         </div>
     </div>
</div>

【讨论】：

但这并没有涵盖我需要的所有内容，我需要完全显示背景图像，而不仅仅是其中的一部分
我更新了我的答案，你只需要添加一个 background-size: cover ;)