如何使文字显示在图片的顶部

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，但不确定它是否是实现我想要的结果的最佳方式。任何建议都将不胜感激，谢谢！

- ohconfusedone

Answer 1

这样的东西

<div style="position: relative; background: url(path to image); width: (width)px; height: (height)px;">
  <div style="position: absolute; bottom: 0; left: 0.5em; width: 400px; font-weight: bold; color: #fff;">
    <p>(text to appear at the bottom left of the image)</p>
  </div>

  <p style="position: absolute; top: 1em; right: 2em; width: 120px; padding: 4px; background-color: #fff; font-weight: bold; font-size: 11px;">
    (text to appear at the top right of the image)
  </p>
</div>

请注意，您应该将CSS与HTML分开。

- Lopes

---

我无法使用背景图片标签 :( - ohconfusedone

不应该使用内联CSS规则，最好使用单独的CSS文件。 - Bram

Answer 2

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

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

这是你在寻找的内容吗？由于你的html实际上没有包含任何文本元素（只有一个图片），所以希望这会对你有所帮助。

我所做的是清理你的html（你有一些未正确关闭的标签，例如图像和一些divs），并且为绝对定位的div添加了top和left属性。

你正确使用了绝对和相对定位，但忘记指定绝对定位项应放置在哪里。

如果你想学习更多，这里有一篇关于定位的好文章： https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

- malinantonsson

---

哇，非常感谢！这是一个非常有帮助和详尽的回答。我会阅读这篇文章，它看起来非常有前途。再次感谢！ - ohconfusedone

随时可以，很高兴能帮忙 :) - malinantonsson

Answer 3

Fiddle: 图片上方的文本和链接

CSS：

div.image-container
{
width: 400px;
}

a.imagewrapper
{
width:inherit;
}

img.theimage{
width:inherit;
}

a.teasertext
{
position: absolute;
padding-top: 1%;

color: #fff;
line-height: 1.2em;
text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
letter-spacing: .02em;
font-size: 1.5em;

overflow-wrap: break-word;
overflow-y: hidden;
-webkit-transition: all .3s;
transition: all .3s;
font-size: 41px;
width:inherit;
}

HTML：

<div>WOOP DE DOO</div>

<div class="image-container">

    <a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>

    <a class="imagewrapper" href="www.stackoverflow.com">
        <img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
    </a>

</div>

<div class="image-container">

    <a class="teasertext" href="www.stackoverflow.com">Text on the image, wow amazing !</a>

    <a class="imagewrapper" href="www.stackoverflow.com">
        <img class="theimage" src="http://img.thesun.co.uk/aidemitlum/archive/01667/THUNDER620_1667926a.jpg">
    </a>

</div>

<div>WOOP DE DOO</div>

- The Demz