html - 如何让文字出现在图片之上

Question

我试图让我的文字出现在我的背景图片之上。我试过使用 z-index 和定位，但似乎无法正确处理。

这是我的 HTML:

<div id="float-left">
  <div id="triangles">
    <img src="img/trianglebackground.png" id="tripic">
  </div> 
  <div id="float-left-text">
    <img src="img/portrait.png" id="port">
  </div>
</div>

这是我目前拥有的 CSS:

#tripic { 
  z-index:1;  
  height: 550px; 
  width: 500px; 
  text-align: center; 
  opacity: 0.2; 
  position: relative; 
}

#float-left { 
  float: left; 
  /*background: url('img/trianglebackground.png') no-repeat center;*/
  background-size:500px 550px; 
  background-color: #03C9A9; 
  height: 550px;
  width: 50%;
  z-index:0 ;
  position: relative; 
}
#float-left-text{ 
  text-align: center;
  z-index: 100; 
  position: absolute; 
}

#port { 
  height: 200px; 
  width: 125px; 
}

现在，整个 #floatlefttext 部分位于背景图片下方，而我希望它位于顶部。我曾尝试使用 background-image，但我不确定它是否是获得我想要的结果的最佳方式。任何建议都很好，谢谢!

Answer 1

我在这里为你创建了一个 fiddle :https://jsfiddle.net/0w1max4f/

#floatlefttext{ 
text-align: center;
z-index: 100; 
position: absolute; 
top: 0px;
left: 0px;
}

这是您要找的吗？由于您的 html 实际上并未包含要放置在背景之上的任何文本元素(只是图像)，但希望这无论如何都会对您有所帮助。

我所做的是清理您的 html(您有一些未正确关闭的标签，例如图像和一些 div)并将顶部和左侧添加到绝对定位的 div。

您正确使用了绝对定位和相对定位，但忘记指定应该放置绝对定位元素的位置。

如果您想了解更多信息，这里有一篇关于定位的好文章: https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/