响应头文本

Question

HTML

<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>

CSS

.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;
}

JSfiddle Demo

二手Bootstrap 3.问题是：

1. 不透明背景上的横幅图像和文字不会以块的形式堆叠，横幅图像不会显示中心，因为它隐藏在不透明背景后面。

显然，填充顶部不是标题中标题的好方法，因为它无助于在背景不透明度旁边的块中堆叠。

1. 尝试在横幅图像的一半之后使背景不透明度变宽，并使其以宽度浮动：800px用于桌面模式。然后当在较小的屏幕中调整大小时，它将在堆叠中的横幅图像之后被按下。

问题：

1. 如何制作横幅广告响应并使用浮点设置背景不透明度：适用于桌面模式？

2. 为什么横幅图像没有显示在块中的示例图像中，足以看到图片是什么？如何在横幅图像后使用背景不透明度堆栈制作文本？

帮助表示感谢。