用文字 btn 覆盖图像答案

【问题标题】：overlay image with text btn用文字 btn 覆盖图像
【发布时间】：2017-03-08 21:44:27
【问题描述】：

我是引导程序的新手，我只想创建图像，然后在上面我有标题和按钮。

谁能帮我解决这个问题？

谢谢。

【问题讨论】：

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

您的positioning 有点错误...您的按钮位置bottom: 5rem; 使按钮离开了窗口。使用 top 代替你对标题所做的：

.block-hero {
  display: block;
  position: relative;
}
.block-hero-img {
  display: block;
  position: absolute;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.block-hero-headline {
  background: rgba(0, 0, 0, 0.9);
  padding: 1rem;
  transition: all 0.2s ease;
  position: absolute;
  top: 3rem;
  left: 1rem;
  max-width: 100%;
}
.mybutton {
  padding: 1rem;
  display: block;
  position: absolute;
  top: 10rem;
  left: 1rem;
  max-width: 100%;
}
h1 {
  font-weight: 700;
  margin: 15px 0;
}

<div class="container-fluid">
  <div class="row block-hero">
    <img src="https:/placehold.it/600x450" alt="imgHero.alt" class="block-hero-img" />
    <div class="container">
      <div class="row">
        <div class="col-md-8 col-sm-12">
          <h1 class="block-hero-headline">My Heading</h1>
          <a href="#" class="btn mybutton">My button</a>

        </div>
      </div>
    </div>
  </div>
</div>

【讨论】：

非常感谢@Andreas。

【解决方案2】：

您可以轻松地从 cms 更改背景图像。为什么要使用图像标签？例如，如果图像来自 php，您可以执行类似的操作。

<div class="row block-hero" style="background-image:url('<?php echo $imageSource;?>')">
</div>

【讨论】：

别忘了给问题打分 :)