html - 在图片上方添加文字，并将其并排放置

我想在两个图像的顶部添加文本，然后将它们并排放置。我尝试通过以下方式执行此操作：

#main {
  position: fixed;
  min-width: 100%;
  min-height: 100%;
}
#front-header {
  font-family: "Linux Biolinum";
  font-size: 42pt;
  line-height: 0pt;
  font-weight: bold;
  text-align: center;
}
#PI {
  font-family: "Linux Libertine";
  font-size: 22pt;
  line-height: 0pt;
  font-weight: normal;
  font-style: normal;
  text-align: center;
  color: red;
}
#copyright {
  font-family: "Latin Modern Mono";
  font-size: 10pt;
  line-height: 0pt;
  font-weight: normal;
  text-align: center;
}
#meerkat {
  width: 18cm;
  height: 14cm;
}
#salt {
  width: 17.5cm;
  height: 14cm;
}
#figu {
  display: inline-block;
  float: left;
  margin-left: auto;
  margin-right: auto;
  height: 30px;
}
#container {
  height: 17.5cm;
  width: 14cm;
  float: left;
  position: relative;
}
#images {
  position: relative;
  float: left;
  left: 0;
  top: 0;
}
#text {
  z-index: 100;
  position: absolute;
  color: white;
  font-size: 24px;
  font-weight: bold;
  left: 50px;
  top: 50px;
}
.image {
  position: relative;
  float: left;
  /* optional */
}
.image .text {
  position: absolute;
  top: 10px;
  /* in conjunction with left property, decides the text     position */
  left: 10px;
  width: 300px;
  /* optional, though better have one */
}

<body style="            height: 723.09px;">
  <p id="front-header">Learning HTML</p>
  <p id="PI">Author:TH</p>
  <p>
    <br>
  </p>
  <p>
    <br>
  </p>
  <div>
    <img title="MeerKAT" alt="MeerKAT" id="meerkat" src="meerkat.jpg" border="0">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
    <div style="background-image:url('SALT-1.jpg');background-repeat:no-repeat;height:20cm;width:20cm;">
      <h1 style="color:white;">Hello World!.</h1>
    </div>
  </div>
  <br>
  <div>
    <p id="copyright">Created Today</p>
  </div>
</body>

我想在名为“ meerkat.jpg”和“ salt-1.jpg”的图上添加文本。之后，我想将它们并排放置。

请提出建议。谢谢。

最佳答案

有几种解决方案可以做到这一点，这是我的观点。我利用MDN中说明的display: flex;属性。检查您问题中的代码，我希望您没有太多的CSS经验，因此我摆脱了所有代码，并做了一个干净的示例。

将图像设置为background-image时，只需在其中添加<hX>元素即可在图像顶部添加文本。

我提供的另一个解决方案在第二行中，它使用position: relative;和position: absolute;以及一个内联图像。将容器设置为relative并将其内部的文本设置为absolute仅会影响div内的文本。

您也可以使用float，但这可能会导致布局出现问题。

.container {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
}
.image-wrapper {
  background-image: url('http://i.imgur.com/AzeiaRY.jpg');
  flex: 1;
  width: 50%;
  height: 300px;
  border: 2px solid red;
  /* Only to show that there are two images */
}
.image-wrapper h1 {
  color: #fff;
  margin: 0;
}
.container-position {
  margin-top: 100px;
}
.image-wrapper-position {
  position: relative;
  flex: 1;
  width: 50%;
}
.image-wrapper-position h1 {
  position: absolute;
  left: 20px;
  top: 20px;
  color: #fff;
  margin: 0;
  padding: 0;
}

<div class="container">

  <div class="image-wrapper">
    <h1>This is text</h1>
  </div>
  <div class="image-wrapper">
    <h1>This is text on top of image</h1>
  </div>

</div>

<div class="container container-position">

  <div class="image-wrapper-position">
    <img src="http://i.imgur.com/AzeiaRY.jpg" />
    <h1>Hello world</h1>
  </div>
  <div class="image-wrapper-position">
    <img src="http://i.imgur.com/AzeiaRY.jpg" />
    <h1>Hello world</h1>
  </div>

</div>

关于html - 在图片上方添加文字，并将其并排放置，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42010827/

加文

html - 在图片上方添​​加文字，并将其并排放置

html - 在图片上方添加文字，并将其并排放置