html - 3 张图片并排显示文字

Question

我想要 3 张相邻的图像，但要填满整个屏幕。所以我有这个:

    .container {
        position: relative;
        text-align: center;
        color: white;
        max-width: 99%;
    }
    img.forside,
    img.forside-1,
    img.forside-2 {
        opacity: 0.7;
    }
    img.forside:hover,
    img.forside-1:hover,
    img.forside-2:hover {
        transition: 1s ease;
        opacity: 1;
        filter: brightness(70%);
    }
    img.forside-2 {
        width: 30%;
        display: inline-block;
        margin-top: 2%;
    }
    img.forside-1 {
        width: 30%;
        display: inline-block;
        margin-left: 2%;
        margin-right: 3%;
        margin-top: 2%;
    }
    img.forside {
        width: 30%;
        display: inline-block;
        margin-right: 3%;
        margin-top: 2%;
    }

<div class="forsidebilleder">
    <a href="index.php/personlig-traening"><img class="forside-1" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
    </a>
    <a href="index.php/individuel-programmering"><img class="forside" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
    </a>
    <a href="index.php/crossfit-bootcamp"><img class="forside-2" src="https://yt3.ggpht.com/-0NAnc68fpH8/AAAAAAAAAAI/AAAAAAAAAAA/RmHdcX3T9lA/s900-c-k-no-mo-rj-c0xffffff/photo.jpg" alt="" />
    </a>
</div>

我知道可以写得更好，但我无法让它发挥作用。但这样一来，这 3 张图片就完美地并排在一起，每边的空间都相同。但我想要的是在每张图片上写一个标题，但我不知道怎么做？

你明白这个问题了吗？ :) 对不起，如果它有点乱。

Answer 1

您可以简单地使用 flex 并考虑背景图像以便在其上使用文本。您还可以添加一个叠加层来控制图像的不透明度:

更新

添加了媒体查询以便在移动设备上更好地查看

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  height: 100vh;
}

.image {
  position: relative;
  flex: 1;
  margin: 5px;
  text-align: center;
  background-size: cover;
  display: flex;
  align-items: center;
}

.image:before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  transition: 1s;
}

.image:hover::before {
  background: rgba(0, 0, 0, 0.5);
}

.image p {
  position: relative;
  z-index: 1;
  flex: 1;
  color: #fff;
  font-size: 18px;
}

@media all and (max-width:460px) {
  .container {
    flex-direction: column
  }
}

<div class="container">
  <div class="image" style="background-image:url(https://lorempixel.com/400/600/)">
    <p>text text</p>
  </div>
  <div class="image" style="background-image:url(https://lorempixel.com/500/400/)">
    <p>text text</p>
  </div>
  <div class="image" style="background-image:url(https://lorempixel.com/600/600/)">
    <p>text text</p>
  </div>
</div>

您可以根据需要调整边距和高度。