Question

所以我花了几个小时搜索，但我所看到的只是在图像上添加文本的标准帮助，没有任何东西可以将文本放在图像上，因为它“掉”了图像。

我附上了一个我所指的例子。

我试图以某种方式使图像保持在彼此的正下方，而不是在图像之间产生空间，添加了另一张照片以供参考。

我尝试创建一个 img 容器并添加文本，但这不允许我让文本从图像上“掉”下来。这就是我到目前为止所拥有的（不包括文本”。

我曾尝试将图像作为正文背景，但不幸的是，这与我正在寻找的设计不同，因为文本将来也将用作链接。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="navigation.css">
  <title>Pasetta Studios</title>
</head>
  <body>

<div id="wrapper">
        <div class="navbar">
          <a href="#index.html">Home</a>
          <a href="#about.html">About</a>
          <a href="#projects.html">Projects</a>
          <a href="#contact.html">Contact</a>
       </div>

      <div class="img-container">
        <img src="images/top-image.jpg" alt="plants">
        <img src="images/second-image.jpg" alt="benches">
        <img src="images/third-image.jpg" alt="cactus">
        <img src="images/last-image.jpg" alt="more cactus">
        <img src="images/pasetta-studios" alt="pasetta studios">
      </div>





        <code>Designed by @PasettaStudios. </code>





   </div>
  </body>
  </html>

这是我的 CSS

@font-face {
    src: url(fonts/Modric.ttf);
    font-family: Modric;
}

@font-face {
    src: url(fonts/Orkney-Regular.ttf);
    font-family: Orkney;
}

@font-face {
    src: url(fonts/Made-Bon-Voyage.otf);
    font-family: Made-Bon-Voyage;
}

* {
    box-sizing: border-box;
}

#wrapper {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    padding-right: 50px;
    padding-left: 50px;
}

body {
  background-color: #262c2c;
}

.navbar {
  max-width: 100%;
  height: 100px;
  margin-right: auto;
  margin-left: auto;

}

/* links and text inside nav bar */
.navbar a {
  float: left;
  padding: 40px 0px 0px 0px;
  background-color: #262c2c;
  text-decoration: none;
  font-size: 20px;
  width: 25%; /* Four links of equal widths */
  text-align: center;
  color: #dae1e7;
  font-family: Orkney;

}

h1 {
  text-align: center;
  font-family: Orkney;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    opacity: 50%;
    margin-left: auto;
    margin-right: auto;

}

p {
    text-align: right;
    font-size: 100px;
    padding-left: 100px;
    color: #dae1e7;
    font-family: Modric;
    font-size: 150px;
}

Answer 1

您需要做的是将您的图像和文本一起放入容器中。然后将文本定位为绝对值并带有负边距或左右值，而不是仅设置顶部值。

<div class="img-container">
    <img src="img1.jpg" alt="Image 1">
    <p class="lefttext">Left</p>
    <p class="righttext">Right</p>
</div>

<div class="img-container">
    <img src="img2.jpg" alt="Image 2">
    <p class="lefttext">Left</p>
    <p class="righttext">Right</p>
</div>

对于多张图片，只需重复此代码。

还有你的 CSS：

.img-container {
    position:relative;
    margin:0;
    padding:0 40px;
}

.img-container img {
    border:0;
}

.img-container p.lefttext {
    position:absolute;
    top:50px;
    margin-left:-40px;
}

.img-container p.righttext {
    position:absolute;
    top:120px;
    width:100%;
    text-align:right;
    margin-right:—40px;
}

或者，你可以这样做

.img-container p.lefttext {
    position:absolute;
    top:20px;
    left:0;
}

.img-container p.righttext {
    position:absolute;
    top:120px;
    text-align:right;
    right:0;
}

如果每张图片的文字在图片上的位置都应该改变，只需从 CSS 中删除 ˋtop:..pxˋ 并将 ˋstyle="top:50px;"ˋ 添加到每个图片标签。

Answer 2

试试这个：

<div class="img-container">
    <div class="row">
      <img src="images/top-image.jpg" alt="plants">
      <span>Your text</span>
    </div>
    <div class="row">
      <img src="images/second-image.jpg" alt="benches">
      <span>Your text</span>
    </div>
    <div class="row">
      <img src="images/third-image.jpg" alt="cactus">
      <span>Your text</span>
    </div>
    <div class="row">
      <img src="images/last-image.jpg" alt="more cactus">
      <span>Your text</span>
    </div>
    <div class="row">
      <img src="images/pasetta-studios" alt="pasetta studios">
      <span>Your text</span>
    </div>
</div>

.img-container {
  width: 500px;
  height: auto;
}

.row{
  position: relative;
  width: 100%;
}

.row span {
  position: absolute;
  color: white;
  top: 0;
}

.row:nth-child(odd) span {
  left: -20px;
}

.row:nth-child(even) span {
  right: -20px;
}

如何在“脱落”图像的图像上添加文本

2 个答案: