Question

我想在两个图像的顶部添加文字，然后将它们并排放置。我试着用以下方式做到这一点：

＆＃13;

#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 */
}

＆＃13;

<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>

＆＃13;

我想在名为＆＃34; meerkat.jpg＆＃34;的数字之上添加文字。＆安培; ＆＃34;盐1.JPG＆＃34 ;.之后我想把它们并排放置。

请建议。感谢。

Answer 1

有几种解决方案可以实现这一点，这是我的看法。我使用了MDN中解释的display: flex;属性。检查你的问题中的代码，我希望你没有那么多的CSS经验，所以我摆脱了所有的代码并做了一个干净的例子。

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

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

你可以也使用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>

Answer 2

使用以下代码作为您网站的指南。改变<img>中的宽度和高度以适合您。

<!DOCTYPE html>
    <html>
    <head>
    <style>
    .floating-box {
    display: inline-block;
        float: left;
        width: 500;
        height: 500;
        margin: 50px;
        border: 1px solid 0;  
    }

    </style>
    </head>
    <body>

    <h2>Text appearing above images</h2>

    <div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
    </div>
    <div class="floating-box"> <img src="https://static.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg" alt="HTML5 Icon" style="width:500px;height:250px;">
    </div>


    </body>
    </html>

在图像顶部添加文本并将它们并排放置

2 个答案: