Html 引导-需要布局方面的帮助

我对编码还不熟悉，我认为最好的学习方法就是找份工作，我就是这么做的。我有一些基本的（比如非常基本的）HTML和CSS知识，但引导布局似乎适合我要完成的任务。请记住，这是我在编码方面的第一个项目

下面是我试图复制的设计：

我只对主页感兴趣，确切地说是主图像下方的实际瓷砖。我似乎找不到最好的解决方案来放置两个背景图像并排（没有间隙）的平铺，在平铺中背景图像上方放置一些h1文本和一个小的

，并将其放置在中间。在最初的两个下方还会有两个瓷砖

我花了一周时间寻找类似的解决方案，但我对所有消化的信息感到疲惫和困惑。有人能告诉我应该使用哪些功能吗

看起来，即使我要定位两幅图像，也总是有间隙（右或左），无法将文本精确定位在图像的正上方，以便在调整显示大小时，文本保持在一个位置，我不想为其余部分哭泣

我有一种感觉，这是一个愚蠢的问题，因为我发现的信息没有一个能提供这个问题的确切答案，所以可能真的很容易做到，而我似乎无法理解

很抱歉占用了你的时间，但是我没有其他人可以问

干杯

请查看以下内容：

<div class="row">
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: red">
        <h1>Image 1</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: orange">
        <h1>Image 2</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: green">
        <h1>Image 3</h1>
    </div>
    <div class="col-sm-6 col-xs 12 col-img" style="background-color: yellow">
        <h1>Image 4</h1>
    </div>
</div>

---

如果其他人遇到这个问题，这里有一个完全有效的解决方案。我只是不确定它是否会在gjfonte的链接下消失，所以我想在这里保持安全：

以下是@gjfonte提供的内容：

<div class="row">
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-1">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-2">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-3">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-4">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
</div>


.content {
  padding-top: 90px;
  color: #fff
}

.content h1 {
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}

.col-img .bg-img {
  text-align: center;
  margin: 0 -15px;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 250px;
}

.bg-img.img-1 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}

.bg-img.img-2 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}

.bg-img.img-3 {
  background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}

.bg-img.img-4 {
  background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}

图1
图1
图1
图1
.内容{
填充顶部：90px；
颜色：#fff
}
.内容h1{
页边距底部：0；
边际上限：0；
文本对齐：居中；
}
.col img.bg img{
文本对齐：居中；
利润率：0-15px；
背景位置：中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
高度：250px；
}
.bg-img.img-1{
背景图像：url（“http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}
.bg-img.img-2{
背景图像：url（“http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}
.bg-img.img-3{
背景图像：url（“http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}
.bg-img.img-4{
背景图像：url（“http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}

好的，它完全按照我的要求创建了这些瓷砖！为此，非常感谢！我不明白我应该把我的图像放在哪里，这样它就会出现在文本后面？我在h1标签下方输入，图像显示在颜色框上方，下方是带有“图像”字样的颜色框。我删除了样式并输入了图像链接，看起来也不正确。有很多方法可以做到这一点，但通常，我会在主元素内创建一个包装器来分配文本、图像等。如果您对我的帮助满意，请不要忘了标记为已接受的答案：）我会稍后检查并测试它。。。谢谢你迄今为止的帮助：））我也会很快尝试“标记为已接受”，无论这意味着什么。。。我以前没有使用stackoverflow寻求帮助，这对我来说是全新的。你发送的最后一个链接成功了。我真是太感谢你了，现在我知道我多么需要好好复习一下我的CSS。干杯，非常感谢你的帮助！！！出于好奇，我之前发送给你的链接以及你悬停在上面时瓷砖上的那些酷炫效果，可以通过CSS或其他方式实现吗？当然，这里是@gjfonte提供的内容：

<div class="row">
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-1">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-2">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-3">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
  <div class="col-sm-6 col-xs 12 col-img">
    <div class="bg-img img-4">
      <div class="content">
        <h1>Image 1</h1>
      </div>
    </div>
  </div>
</div>


.content {
  padding-top: 90px;
  color: #fff
}

.content h1 {
  margin-bottom: 0;
  margin-top: 0;
  text-align: center;
}

.col-img .bg-img {
  text-align: center;
  margin: 0 -15px;
  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 250px;
}

.bg-img.img-1 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitycycle-wrapper.jpg");
}

.bg-img.img-2 {
  background-image: url("http://www.montere.it/assets/img/bg-qualitymap-wrapper.jpg");
}

.bg-img.img-3 {
  background-image: url("http://www.montere.it/assets/img/bg-recipes-wrapper.jpg");
}

.bg-img.img-4 {
  background-image: url("http://www.montere.it/assets/img/bg-journal-wrapper.jpg");
}