使用Bootstrap 4，如何将文本固定在图像上？

Question

我有一个背景，上面出现一个文字（当悬停文本时）。当我调整窗口大小时，我的背景图像缩小而文本没有缩小。我希望文本在图片上保持相同的位置。当图像缩小时（由于窗口调整大小），文本如何缩小并保持在同一位置？

调整大小之前：

调整大小后：

<div class="row two">
  <div class="col-md-12">
    <a href="{{site.baseurl}}/portfolio.html">
      <img src="http://res.cloudinary.com/lyoon/image/upload/c_scale,h_350,w_500/v1510612416/windows-10-1995434_1280_xtmlea.png" class="img-fluid shadow" alt="My apps/games made" />
      <p class="img_description">Colt Steele Udemy Projects <i class="fa fa-play" aria-hidden="true"></i></p>
    </a>
  </div>
</div>

CSS：

.shadow {
  box-shadow: 0px 3px 10px grey;
  -moz-box-shadow: 0px 3px 10px grey;
  -webkit-box-shadow: 0px 3px 10px grey;
}

.img_description {
  margin: 0 auto;
  width: 500px;
  padding-top: 175px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  font-size: 20px;
  color: white;
  background-color:
  visibility: hidden;
  opacity: 0;
}

.img_description:hover {
  visibility: visible;
  opacity: 1;
  background-color: rgba(139, 146, 152, 0.65);
}

Answer 1

我建议查看媒体查询。

您可以设置一个阈值，在这些条件下触发不同的样式。当您希望UI执行不同大小的不同操作时，它非常有用。

@media only screen 
and (*Your threshold criteria goes here* EXAMPLE:  max-width : 1000px) {   
  //css goes here with whatever css you want to fire at this threshold
}

我只是定位您的文本类并设置一个或两个媒体查询以使其运行。如果您需要进一步的帮助，请告诉我。