我正在尝试创建一个显示时间的页面。 我使用的字体的“:”很难看,所以我想用图像替换它。 但是,当时间从 9:59 变为 10:00 时,会出现间距问题。 这是我的一些代码:
.image{
position: absolute;
width:30px; height:90px;
background-image: url("2dots.png");
background-repeat: no-repeat;
background-size:50%;margin-top:30px;
left:50%;
margin-left:-49px;
z-index:-1;
}
#time {
font-size: 99px;
width:300px;
left:50%;
margin-top:0px;
margin-left:-40px;
}
<div id="time"><div class="image"></div></div>
function updateClock() //updates time ever second inside #time every second
最佳答案
你真的不想玩弄这样的定位。
你应该只设置 .image
至 display: inline-block
,然后将其置于小时和分钟之间:
.image{
width:30px;
height:90px;
background-image: url("2dots.png");
background-repeat: no-repeat;
background-size:50%;
}
<div id="time">
<span id="hours">12</span>
<div class="image"></div>
<span id="minutes">30</span>
</div>
然后,只需在适当的跨度内设置当前时间的小时/分钟即可。
当然,如果需要,您可以在其后添加秒数。
但是,另一种选择是使用 <span>
显示不同的字体,只是冒号:
span{
font-family: Arial;
}
.colon{
font-family: Tahoma;
}
<div id="time">
<span id="hours">12</span><span class="colon">:</span><span id="minutes">30</span>
</div>
(Normal colon : )
或者,来自 @Paulie_D的 suggestion :
span{
font-family: Arial;
}
#hours:after{
content: ':';
font-family: Tahoma;
}
<div id="time">
<span id="hours">12</span><span id="minutes">30</span>
</div>
(Normal colon : )
关于javascript - 在 div 中相对于 div 定位图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26604885/