Question

当文本调整大小到不同的断点时，我希望文本相对于图像定位，但是我不确定该怎么做

我希望我的文本相对于背景处于适当位置，以便在调整大小时始终与图像保持一致。

这是我正在使用的HTML代码：

<section id="background1">
    <!--Section to display content-->
    <section id="content">
        <figure><img class="img-fluid" src="../Others/wolf-wolves-snow-wolf-landscape-89773.jpeg" onclick="openModal()" class="hover-shadow"></figure>
        <!--Display content-->
        <p class="small">Sustainability</p>
        <p class="big">Starts with<br> You</p>
        <a href="../Website/about.html">Learn more!</a>
    </section>
</section>

这是样式文本的CSS代码：

@charset "UTF-8";

/*default*/
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#background1 {
  height: 600px;
  background-color: #d3d3d3;
}

#content figure img {
  position: relative;
  width: 100%;
  color: white;
}

#content .small {
  position: absolute;
  top: 45%;
  left: 49%;
  display: block;
  text-align: center;
  font-family: "EB Garamond", serif;
  font-size: 2vw;
  color: rgb(37, 37, 37);
  transform: translate(-50%, -50%);
}

.big {
  position: absolute;
  top: 65%;
  left: 49%;
  display: block;
  text-align: center;
  font-size: 5vw;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  color: #fff;
  transform: translate(-50%, -50%);
}

#content a {
  position: absolute;
  top: 90%;
  left: 49%;
  display: block;
  padding: 5px;
  border: 3px solid #2d1c8a;
  border-radius: 80px;
  text-align: center;
  font-size: 2vw;
  text-decoration: none;
  font-size: 20px;
  color: rgb(255, 255, 255);
  background-color: #1e3094;
  font-family: "Montserrat", sans-serif;
  transform: translate(-50%, -50%);
}

Answer 1

定位完成。将任何样式应用于所需的按钮/文本（color，font-family等）。

#content {
  position: relative;
}

.content {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  text-align: center;
}

#content figure img {
  width: 100%;
}

<section id="background1">
  <!--Section to display content-->
  <section id="content">
    <figure>
      <img class="img-fluid" src="https://static1.squarespace.com/static/5baeb0a5da50d36d5bfc1f67/t/5bb6862ee79c70988e4f7594/1538688629297/dreamstime_xxl_94596211+-+wolf+profile.jpg?format=1500w" onclick="openModal()" class="hover-shadow"></figure>
    <!--Display content-->
    <div class="content">
      <p class="small">Sustainability</p>
      <p class="big">Starts with<br> You</p>
      <a href="#">Learn more!</a>
    </div>
  </section>
</section>

Answer 2

尝试

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example</title>
<style type="text/css">
    .box{
        position: relative;
        display: inline-block; /* Make the width of box same as image */
    }
    .box .text{
        position: absolute;
        z-index: 999;
        margin: 0 auto;
        left: 0;
        right: 0;        
        text-align: center;
        top: 40%; /* Adjust this value to move the positioned div up and down */
        background: rgba(0, 0, 0, 0.8);
        font-family: Arial,sans-serif;
        color: #fff;
        width: 60%; /* Set the width of the positioned div */
    }
</style>
</head> 
<body>
    <div class="box">
        <img src="https://images.pexels.com/photos/531321/pexels-photo-531321.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Flying Kites">
        <div class="text">
            <h1>Example</h1>
        </div>
    </div>
</body>
</html>

我如何相对于图像定位文本？

2 个答案: