Question

这真令人沮丧！如何制作＆lt; H2＆GT;去图像的底部，而不是文本的底部？

https://codepen.io/TylerL-uxai/pen/gRxMqG/

<div class="col-lg-4">
  <div class="header-link">
    <img src="https://image.ibb.co/haP17k/umbrella.jpg" width="300" height="auto" alt="umbrella" border="0">
    <h2>Artificial Intelligence & Blockchain Interest</h2>
  </div>
    <p>Learning more every day about Ethereum and other blockchain technologies!</p>
    <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
  </div>

Answer 1

喜欢这样吗？

将<img>替换为<div>并将图片用作该div的背景
在该div中包含h2
将position: relative应用于div
将position: absolute应用于h2，因为绝对定位的元素位于

在相对于其最近的祖先的指定位置

（MDN）

＆＃13;

.header-img {
  position: relative;
  background: url('https://image.ibb.co/haP17k/umbrella.jpg') center center no-repeat / 100% 100%;
  height: 300px;
  width: 300px;
}

h2 {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

＆＃13;

<div class="col-lg-4">
  <div class="header-link">
    <div class="header-img">
      <h2>Artificial Intelligence & Blockchain Interest</h2>
    </div>
  </div>
    <p>Learning more every day about Ethereum and other blockchain technologies!</p>
    <p><a class="btn btn-primary" href="#" role="button">View details &raquo;</a></p>
</div>
  </div>

＆＃13;

文字叠加图像（css）

1 个答案: