我用 HTML 构建了一个简单的倒数计时器，现在我希望将所有文本放在图像之上。所以图片在背景中，文字在上面。
这是 mac 屏幕的图像，如果有意义的话，我希望文本位于屏幕内部 :)
代码:
.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}<div class="macPic" class="">
<img src="Images/mac.png" class="img-responsive" alt="Responsive image">
<div class='time-to'>
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>最佳答案
.time-to {
text-align: center;
font-family: Bangers;
color: white;
font-size: 35px;
letter-spacing: 2px;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.time-to span {
display: block;
font-size: 80px;
color: #D9D900;
}
.macPic {
position: absolute;
}<div class="macPic" class="">
<img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" class="img-responsive" alt="Responsive image">
<div class="centered">
Slutar Midnatt Söndag :
<span countdown='' date='December 3, 2017 12:00:00'> </span>
</div>
</div>关于html - 在图像上放置文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47414241/