有沒有辦法在 CSS 或 JS 中將文本放在上面的文本上？
如何在文本上添加文本
aluckdog
2023-11-02 21:24:20
3 回答
慕少森
TA貢獻2019條經(jīng)驗 獲得超9個贊
使用父元素relative position并將文本添加為absolute子元素：
.elements {
position: relative;
}
.outer-element, .inner-element {
font-size: 60px;
font-family: verdana;
font-weight: bold;
}
.outer-element {
color: blue;
}
.inner-element {
position: absolute;
left: 50px;
top: 35px;
color: yellow;
}
<div class="elements">
<div class="outer-element">GTA</div>
<div class="inner-element">ROLEPLAY</div>
</div>
隔江千里
TA貢獻1906條經(jīng)驗 獲得超10個贊
是的，您可以使用 CSS 在圖像前面添加文本。
.container {
? ? ? position: relative;
? ? ? text-align: center;
? ? ? color: white;
? ? }
? ? .firstline {
? ? ? position: absolute;
? ? ? top: 8px;
? ? ? left: 15px;
? ? ? font-size: 50px;
? ? ? font-weight: bold;
? ? ? color: white;
? ? }
? ? .secondtline {
? ? ? position: absolute;
? ? ? top: 22px;
? ? ? left: 40px;
? ? ? font-size: 70px;
? ? ? font-weight: bold;
? ? ? color: orange;
? ? }
<div class="container">
? ? ? <img src="https://www.w3schools.com/howto/img_snow_wide.jpg" alt="Snow" style="width:100%;">
? ? ? <div class="firstline">GTA</div>
? ? ? <div class="secondtline">ROLEPLAY</div>
? ? </div>
慕蓋茨4494581
TA貢獻1850條經(jīng)驗 獲得超11個贊
嘗試這個
<div style="position:absolute; top:0;left:0;">some text</div>
<div style="position:absolute; top:5;left:5;">some text</div>
<div style="position:absolute; top:10;left:10;">some text</div>
<br/>
<div style="position:absolute; top:110;left:100;">some text</div>
<div style="position:absolute; top:105;left:105;">some text</div>
<div style="position:absolute; top:100;left:110;">some text</div>
添加回答
舉報
0/150
提交
取消