Question

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

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

我认为你真正要做的就是让引导程序的jumbotron有一张背景图片。为什么您的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; 
}

Answer 2

您可以将图像设置为背景图像

.imageAndText img{
    width: 100%;
   background: no-repeat center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  background-size: cover;
  -o-background-size: cover;
}

对于文本，您可以使用col-xs-12或编写单独的媒体查询

BootStrap响应背景图像上有文字不起作用

2 个答案:

Working bootply