如何使文字顯示在圖像頂部

我想讓我的文字出現在我的背景圖像上。我試圖玩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

如何使文字顯示在圖像頂部

回答

相關問題