调整浏览器大小时文本不会与图像重叠并向上移动

Question

我正在尝试使内部文本与 link 内部的图像重叠。问题是我尝试使用 top。它有效，但如果我尝试调整浏览器的大小，它会向上移动并且不会停留在图像的中间。

    .background1 {
      padding: 40px 20px;
      max-width: 500px;
      margin: 20px;
      transition: 0.5s;
    }

    .background1 a {
      text-decoration: none;
      color: white;
    }

    .background1 a .overlay h2 {
      position: relative;
      text-align: center;
    }

    .background1 img {
      width: 100%;
      border: 3px solid grey;
      transition: 0.5s;
    }

   .overlay{
     color: white;
     text-shadow: 0 2px 4px black;
    }

  <div class="content">
    <div class="background1">
      <a href="#">
        <img src="icon1.jpg"></a>
      <div class="overlay">
        <h2>Web Design</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon2.jpg"></a>
      <div class="overlay">
        <h2>JAVA</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon3.jpg"></a>
      <div class="overlay">
        <h2>CSS</h2>
      </div>
      </a>
    </div>
    <div class="background1">
      <a href="#">
        <img src="icon4.jpg"></a>
      <div class="overlay">
        <h2>HTML</h2>
      </div>
      </a>
    </div>
</div>

如果我就这样离开。 h2 文本将位于图像的底部中心。如果我添加 top: -120px;，那么文本会转到图像的中间。但是，当我尝试调整大小以查看它在移动设备中的外观时 phone，它开始向上远离图像。

我该如何解决这个问题？另外，我想将它保留在 css 中。我还在学习中，所以我不想深入研究一些奇怪的功能或编码。

Answer 1

我想这就是您想要的。您需要将叠加层 放在锚点内 并将其放置在绝对位置，以便它完全覆盖图像。然后将文本置于该叠加层的中心。当您调整视口大小时，文本将留在中间，但当然它会相对于图像变大。（如有必要，这可以通过媒体查询进行调整）。

* {
  box-sizing: border-box;
}

.content {
  display: flex;
  flex-wrap: wrap;
  background: blanchedalmond;
}

.background1 {
  width: 40%;
  background: oldlace;
  margin: 10px;
}

.background1 a {
  text-decoration: none;
  color: white;
  padding: 40px;
}

.anchor {
  border: 3px solid grey;
  position: relative;
  display: inline-block;
  text-align: center;
  box-shadow: -2px 2px 5px 2px rgba(0, 0, 0, 0.2);
}

img {
  width: 100%;
  vertical-align: middle;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  display: flex;
}

h2 {
  margin: auto;
}

<div class="content">
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>Web Design</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>JAVA</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>CSS</h2>
      </div>
    </a>
  </div>
  <div class="background1">
    <a class="anchor" href="#">
      <img src="https://i.guim.co.uk/img/media/a1e119a48076615b6502ceccd369bc72bcf5d93a/0_374_5616_3370/master/5616.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=68a05c30b5154497160d38f176556727">
      <div class="overlay">
        <h2>HTML</h2>
      </div>
    </a>
  </div>
</div>

调整浏览器大小时文本不会与图像重叠并向上移动

Text Won't Overlap Image and Moves up When Resizing Browser

html

css

position

text-alignment