我是編碼初學(xué)者，我想將文本放在圖片前面。我正在使用科莫多。這是我的代碼：
3 回答
臨摹微笑
TA貢獻(xiàn)1982條經(jīng)驗 獲得超2個贊
我在這里為您提供了一個解決方案，但它可以通過多種不同的方式實現(xiàn)。
.bandeau {
position: relative;
text-align: center;
}
h1 {
position: absolute;
top: 10%;
left: 20%;
color: red;
}
h2 {
position: absolute;
top: 25%;
left: 20%;
color: red;
}
h3 {
position: absolute;
top: 40%;
left: 20%;
color: red;
}
<div id="bandeau">
<div id="contenu">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg" alt="photo d'aceuil">
<h1>Pour ma nadette</h1>
<h2>Mon amoureuse</h2>
<h3>Je t'aime</h3>
</div>
</div>
手掌心
TA貢獻(xiàn)1942條經(jīng)驗 獲得超3個贊
應(yīng)該是這樣，如果您需要更多幫助，請發(fā)表評論。這會將文本放置在圖像上并將其置于中心。
<div>
<img src="">
<h1>Text</h1> <!-- This will positon text over image -->
</div>
div {
position: relative;
text-align: center;
}
image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
小怪獸愛吃肉
TA貢獻(xiàn)1852條經(jīng)驗 獲得超1個贊
根據(jù)您的標(biāo)簽，這是一個 CSS 解決方案。將其添加到您的<head></head>標(biāo)簽之間。
<style>
#contenu::after {
content: "words";
}
</style>
- 3 回答
- 0 關(guān)注
- 158 瀏覽
添加回答
舉報
0/150
提交
取消