html - 带有文本的 BootStrap 响应式背景图像不起作用

Question

我开始使用 BootStrap 3 并尝试使用带有文本的背景图像。同时我希望它能够响应，但似乎我实现它的方式存在一些问题。我能够让它在普通桌面上运行，但是当我尝试在移动设备上模拟时，文本会超出背景图像。

http://jsfiddle.net/cn5guyt4/2/

<div id="front-landing">
   <div class="container jumbotron hero-unit">
       <h2 class="h1"><span>"Sample Test"</span></h2>
       <h3 class="-sub-title">
          <span>"Sample Test text 2"</span>
       </h3>
    </div>
</div>

.hero-unit {
  position: relative;
  margin-bottom: 0;
  margin-top: 15px;
  background: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg') 50% 80% no-repeat;
  background-size: 100%;
  min-height: 700px;
}

.h1 {
  font-size: 2.625em;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.571em;
  margin-top: 2em;
  text-align: center;
}

.-sub-title {
  font-weight: 400;
  text-align: center;
}

h2 span { 
    background-color: white; 
}

h3 span { 
    background-color: white; 
}

有人可以帮我弄清楚我在这里做错了什么吗？

谢谢

Answer 1

在你的hero-unit class中，background-size设置为100%但它应该是cover 相反。这产生了巨大的差异:see bootply .

我认为您真正想要做的是让 bootstrap 的超大屏幕有背景图片。为什么您的 jsfiddle 代码与您在此处发布的代码不同？有很大的差异。我的修复是使用上面的代码。

Working bootply

<div id="front-landing">
   <div class="container jumbotron ">
       <h2 class="h1"><span>"Sample Test"</span></h2>
       <h3 class="-sub-title">
          <span>"Sample Test text 2"</span>
       </h3>
    </div>
</div>

.h1 {
  font-size: 2.625em;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.571em;
  margin-top: 2em;
  text-align: center;
}
.jumbotron{
    background-image: url('http://1.bp.blogspot.com/-P5uqUWLgZmA/UtQDdtahipI/AAAAAAAAF3E/IgvARwfxAlw/s1600/seamless-stone-background.jpg');
    background-size: cover;
}

.-sub-title {
  font-weight: 400;
  text-align: center;
}

h2 span { 
    background-color: white; 
}

h3 span { 
    background-color: white; 
}