Question

如何将文本放在图像div上的某个位置，同时保持其响应（不会在较小的设备或更大的设备上从那个位置移动）我得到的问题是，大多数内容不适合我想要它或者甚至不会在较小的设备中坚持图像，所以我需要解决方案如何解决这个问题，在图像div上放置3个文本div而不使用制作背景图像的方法，我需要它与标签一起工作 Bootstrap v4

我试过这个：

CODEPEN

<div class="slider">
            <div class="cover-image">
              <div class="image-link">
                <div class="image-date">
                  <p>08.10.2017</p>
                </div>
                <div class="image-text">
                  <div class="img-test"><h2>Gradjevina koja se gradi duze od egipatskih piramida</h2></div>
                </div>
                <a href="#">Eskterijer</a>
              </div>
              <img class="img-fluid" src="@asset('/images/slider-1.png')">
            </div>
          </div>

和CSS：

.cover-image {
  position: relative;
}

.slider .image-link {
  position: absolute;
  bottom: 20px;
  left: 10px;
  width: 100%;
  color: white;
}

.img-test {
  font-family: Oswald;
  font-size: 40px;
  font-weight: 600;
  position: absolute;
  bottom: 50px;
  left: 10px;
  color: white;
  text-transform: none;
}

.slider .image-date {
  position: absolute;
  bottom: 150px;
  left: 10px;
  color: white;
  border-bottom: 1px solid white;
  margin-bottom: 0;
}

<div class="slider">
  <div class="cover-image">
    <div class="image-link">
      <div class="image-date">
        <p>08.10.2017</p>
      </div>
      <div class="image-text">
        <div class="img-test">
          <h2>Gradjevina koja se gradi duze od egipatskih piramida</h2>
        </div>
      </div>
      <a href="#">Eskterijer</a>
    </div>
    <img class="img-fluid" src="http://vietlongtravel.com/wp-content/uploads/2017/05/151548909_high-770x530.jpg">
  </div>
</div>

在响应时将文本放在图像上

0 个答案: