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

像这样的东西

<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

分开

Answer 2

我在这里为你创造了一个小提琴：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/

Answer 3

小提琴：Text ontop of an image and linkage

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>

如何使文本显示在图像的顶部

3 个答案: