Css 带文本的响应标题

HTML

使用引导3。这些问题是：

不透明背景上的条幅图像和文本不会以块的形式堆叠，并且条幅图像不会清晰显示中心，因为它隐藏在不透明背景后面 显然，在页眉中填充顶部并不是一个很好的方法，因为它无助于在块中堆叠背景不透明度旁边

尝试在横幅图像的一半后使背景不透明度变宽，并使其浮动宽度：对于桌面模式，为800px。然后，当在较小的屏幕中调整大小时，它将在堆栈中的横幅图像后向下推

问题:

如何使横幅响应，并设置背景不透明度与浮动宽：正确的桌面模式

为什么横幅图像在块中的显示与示例图像中的显示不足以看到图片是什么？如何使背景不透明度的文本堆叠在横幅图像之后

---

谢谢你的帮助

乔：你能找一个更好的解释你的问题吗？@SleekGeek明白了，我已经提出了我的问题。很抱歉，我不能很好地理解你的问题。我给你做了一把小提琴，以防万一你要这样的东西：（如果是的话，我会把它作为一个答案）@AlvaroMenéndez-非常感谢，是的，这就是我想要的，但唯一的问题是，无论是大屏幕还是小屏幕，文本都会被切断。背景不透明度为50%时的高度不正确。它应该放在堆栈中的横幅图像之后-参见示例图像。好吧，要将其放在图像下，恐怕您需要为标题设置一个高度。因为只有这样才能将文本框完美地移动到图像下方：（在本例中，我刚刚使用了500px）

<header class="hero-wrap">
  <div class="container no-gutters">
    <div class="message">
      <h1>Test header</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam mattis metus quis lacus venenatis ullamcorper. Ut ut interdum mauris. Phasellus varius nibh eu purus ultrices efficitur. Morbi egestas nibh massa, quis egestas ligula feugiat vitae. Quisque tincidunt sagittis facilisis. In imperdiet, nisl sed sodales aliquet, ante est bibendum est, et congue magna elit quis sapien. Vestibulum eleifend tellus nibh, ac ultrices risus rutrum vel. Sed feugiat tristique nulla, ut vestibulum nulla rhoncus eget. Mauris eget lorem at nulla vestibulum pharetra vitae et massa. Fusce bibendum hendrerit imperdiet. Fusce lobortis est vel rhoncus vestibulum.</p>
    </div>
  </div>
</header>

.hero-wrap{
  color: #fff;
  background: url(http://dreamatico.com/data_images/kitten/kitten-5.jpg) no-repeat center center;
  background-size: cover;
  padding-top: 30%;
  position: relative;
}

.message{
  background: #000;
  color: #fff;
  float: none;
  opacity: 0.8;
  text-align: left;
  height: 100%;
}

@media (min-width: 70em){
  .hero-wrap{
    padding-top: 40%;
  }
  .message{
    float: right!important;
    padding: 75px 480px 85px 40px;
    position: absolute;
    right: 0;
    top: 0;
    max-width: 800px;
  }

}

@media (max-width: 37.5em){
   .hero-wrap{
     padding-top: 20%;
   }

   .message{
    padding-right: 135px;
    padding-left: 20px;
    padding-top: 20px;
    padding-bottom: 60px;
   }
}

.row.no-gutters {
  margin-right: 0;
  margin-left: 0;
}
.row.no-gutters [class^="col-"],
.row.no-gutters [class*=" col-"] {
  padding-right: 0;
  padding-left: 0;
}

.container.no-gutters {
  padding-right: 0;
  padding-left: 0;
}
.container.no-gutters [class^="col-"],
.container.no-gutters [class*="col-"]{
  padding-right: 0;
  padding-left: 0;
}