html - 2x2的图像，每个文本的文字重叠

好的，序言：我是一位非常业余的编码员。例如，我上周才刚开始，我主要要做的是查找“如何做x”，然后将其与“如何做y”和“如何做z”组合在一起，这是想法和代码的笨拙组合。

我想做的是将4张图片以2x2的方向放置，并留有足够的间距，以使某些背景清晰可见，并将所有图片集中在页面上，并且具有半响应性（我并不担心移动或移动到了极点，但我希望它在不同的浏览器尺寸/更改的屏幕尺寸等上看起来不错。

同样，我对此很新手，在协调所有细节方面遇到麻烦。我知道代码很草率，并且可能是“错误的”，但是我只是在试着做。太好了，我只是想将这些图像以适当的间距放在任何页面上。

body,
html {
  height: 100%;
  margin: 0;
}

.bg {
  background-image: url("http://static1.businessinsider.com/image/587621bcdd08953f208b491a/14-eerily-beautiful-photos-of-europes-first-underwater-art-museum.jpg");
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

ul {
  list-style-type: none;
}

.container {
  position: relative;
  width: 48%;
  float: right;
  margin-bottom: 70px;
}

.image {
  display: inline-block;
  width: 300px;
  height: 200px;
  margin: auto;
  border-radius: 15%
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  width: 300px;
  opacity: 0;
  transition: 2s ease;
  background-color: green;
  border-radius: 15%
}

.container:hover .overlay {
  opacity: .75;
}

.text {
  color: white;
  font-size: 1.5vw;
  position: absolute;
  top: 50%;
  left: 35%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="bg">
  <div class="container">
    <img src="https://i.pinimg.com/736x/96/3b/ee/963beeb07d222d64094a25bc3840b532--easter-bunny-a-bunny.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        It's a vampire bunneh!!! BUNNICULA!!!! YES!!! HAHAHAHA
      </div>
    </div>
  </div>

  <div class="container">
    <img src="https://i.ytimg.com/vi/Q6xybdaV3xs/maxresdefault.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        <ul>
          <li>This really isn't my text</li>
          <li>But I'm playing with it anyway</li>
          <li>To show my UL stuff</li>
          <li>or something of that nature</li>
          <li>Hi and thank you</li>
          <li>if you choose to help</li>
          <li>Or if you just want to laugh and watch</li>
      </div>
    </div>
  </div>

  <div class="container">
    <img src="http://www.herts.ac.uk/__data/assets/image/0009/66717/rocket_car_launch.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        I thought this thing was kinda cool
      </div>
    </div>
  </div>

  <div class="container">
    <img src="https://upload.wikimedia.org/wikipedia/en/e/eb/Spaceball_jump_over_Skydive_35.jpg" alt="Avatar" class="image">
    <div class="overlay">
      <div class="text">
        I've always wanted to go skydiving!
      </div>
    </div>
  </div>
</div>

是的。我遇到的笨拙的设置可能令人恐惧和令人困惑，但我只是试图从逻辑上而不是通过任何总体背景知识来遵循这一点上对我有意义的东西。任何帮助将不胜感激，即使是告诉我“你是个白痴，完全重新开始或停止编码，因为你很烂”。 = P

最佳答案

你是这个意思吗？ https://codepen.io/anon/pen/ZvaOxY

小心position，当不需要它时，您似乎使用过多了。将元素放置为padding和margin而不是绝对位置和top, bottom, left, right，因为这可能会导致响应式元素出现问题，并且如果您不小心就会损坏东西。

使用Bootstrap，您可以通过几个类而无需自定义css来实现。

一起玩是我们大家开始学习，不断学习并尝试新事物的方式。

关于html - 2x2的图像，每个文本的文字重叠，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48123922/