css 如何在两个并排的图像上添加文本

plupiseo 于 2023-02-14 发布在其他

关注(0)|答案(2)|浏览(221)

我尝试把文字放在两张并排的图片上，一起填满整个网站。代码如下：
超文本：

<div class="main">
        <img src="city.jpg" class="city" alt="city">
        <img src="couple.jpg" class="couple" alt="couple">
    </div>

CSS：

.main {
    display: flex;    
    justify-content: space-between;
    width: 100%;
    height: 152.5vh;
  }
  
  .city {
    flex-basis: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  
  .couple {
    flex-basis: 50%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

这两张图片是并排的，中间没有任何空间。我想把文字添加到中间，这样就可以在两张图片的上面了。我该怎么做呢？
我已经在网上寻找解决方案，但没有任何工作或只是太难理解和实施。提前感谢你!

css

来源：https://stackoverflow.com/questions/75421703/how-to-add-text-on-top-of-two-side-by-side-images

2条答案

按热度按时间

knpiaxh11#

就我个人而言，我不会使用Flex，而是使用Grid
简单网格2行，2列。
文本div占第一行2个单元格，图像在第二行，每个单元格占1个单元格

body {
  margin: 0;
  padding: 0;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  max-width: 100%;
  height: 152.5vh;
}

.text {
  grid-area: 1 / 1 / 2 / 3;
  align-self: center;
  justify-self: center;
  color: #222222;
}

.city {
  grid-area: 2 / 1 / 3 / 2;
  width: 100%;
  height: 100%;
}

.couple {
  grid-area: 2 / 2 / 3 / 3;
  width: 100%;
  height: 100%;
}

.city img,
.couple img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="main">
  <div class="text">
    1 title for 2 image
  </div>
  <div class="city">
    <img src="https://picsum.photos/id/237/800/600" alt="city">
  </div>
  <div class="couple">
    <img src="https://picsum.photos/id/85/800/600" alt="couple">
  </div>
</div>

赞(0）回复(0）举报 2023-02-14

7cwmlq892#

因此，为了回答你最新的评论"这是正确的。超过两个图像的中心"
我们仍然可以用网格来表示图像，在add中我把网格放在相对位置，文本放在绝对位置。2你可以用最高值。

body {
  margin: 0;
  padding: 0;
}

.main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  max-width: 100%;
  height: 152.5vh;
  position: relative;
}

.text {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: #222222;
}

.city {
  grid-area: 1 / 1 / 2 / 2;
  width: 100%;
  height: 100%;
}

.couple {
  grid-area: 1 / 2 / 2 / 3;
  width: 100%;
  height: 100%;
}

.city img,
.couple img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="main">
  <div class="text">
    1 title for 2 image
  </div>
  <div class="city">
    <img src="https://picsum.photos/id/237/800/600" alt="city">
  </div>
  <div class="couple">
    <img src="https://picsum.photos/id/85/800/600" alt="couple">
  </div>
</div>

赞(0）回复(0）举报 2023-02-14

我来回答

css 如何在两个并排的图像上添加文本

2条答案

相关问题

热门标签

最新问答