我如何相對於圖像定位文本？

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 個解決方案

解決方案1
0 已采納 2019-07-27 13:08:33

解決方案2
0 2019-07-27 13:11:57

我如何相對於圖像定位文本？

問題描述

2 個解決方案

解決方案1 0 已采納 2019-07-27 13:08:33

解決方案2 0 2019-07-27 13:11:57

解決方案1
0 已采納 2019-07-27 13:08:33

解決方案2
0 2019-07-27 13:11:57