时间戳

首页 > 解决方案 > 具有背景 img 问题的引导容器

html - 具有背景 img 问题的引导容器

问题描述

我有一些简单的 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) */                
}

实际结果：

在此处输入图像描述

标签： htmlcssbootstrap-4

解决方案

你的意思是这样的？设置容器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>

推荐阅读