如何使文字显示在图像顶部

我想让我的文字出现在我的背景图像上。我试图玩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，但我不确定这将是获得我想要的结果的最佳方式。任何建议将是伟大的，谢谢！

来源

2015-04-07 ohconfusedone

我创建了一个捣鼓你在这里：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/

来源

2015-04-07 03:40:17 malinantonsson

哇，非常感谢！这是一个非常有用和彻底的答案。我会阅读这篇文章，看起来很有希望。再次感谢！ – ohconfusedone

随时，很高兴我可以帮助:) – malinantonsson

像这样的事情

<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代码中分离

来源

2015-04-07 03:16:18 Lopes

我可以” t使用背景图片标签:( – ohconfusedone

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

小提琴：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>

来源

2015-04-29 20:01:38

如何使文字显示在图像顶部

回答

相关问题