Question

我目前正在尝试使用HTML和CSS，并且希望将文本放置在图像上。我设法在首页上做到了这一点，并认为我将使用同一类，并且文本也将正确定位。主页如下所示：Homepage html代码如下所示：

<div class="textoverimage">
     <img src="./imgs/Restaurant.jpg" alt="me">
     <div class="textforoverimage"><h2>Second year IT student</h2></div>
 </div>`

css看起来像这样：

.textoverimage img{
    object-fit: cover;
    width: 100%;
    height: 277px;
    position: relative;
    text-align: center;
    color: white;
  }
.textforoverimage h2{
    position: absolute;
    width: 100%;
    top: 18%;
    color: white;
    font-family: 'Segoe UI';
    font-size:60px;
    text-align: center;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: black;
  }

关于我的页面，我希望在图像上获得相同的文字效果，但仅在第二个图像上看起来像这样：About page

html代码如下：

<div class="textoverimage"> <img src="./imgs/Restaurant.jpg" alt="Restaurant"> <div class="textforoverimage"><h2>Jobs & Schooling</h2></div> </div>

如您所见，“工作和学校”文本显示在页面顶部。我认为因为textforoverimage的位置是绝对的，所以它会根据其父级的位置（我认为是textoverimage div）进行移动。但是，它似乎是根据页面定位的。

我在做什么错？我使用的position属性是否错误或是html错误？

Answer 1

将position: relative应用于.textoverimage，而不是应用于图像-这是父元素，需要用作其子元素绝对位置的锚点。并将position:absolute应用于.textforoverimage，而不是应用于其中包含的h2。

文字在图片上的CSS定位

1 个答案: