Javascript 在div中相对于div的图像定位

我正在尝试创建一个显示时间的页面。 我使用的字体的“：”很难看，所以我想用图像替换它。 但是，当时间从示例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{
位置：绝对位置；
宽度：30px；高度：90px；
背景图片：url（“2dots.png”）；
背景重复：无重复；
背景尺寸：50%；边缘顶部：30px；
左：50%；
左边距：-49px；
z指数：-1；
}
#时间{
字体大小：99px；
宽度：300px；
左：50%；
边际上限：0px；
左边距：-40px；
}
函数UpdateLock（）//每秒钟更新一次#每秒钟更新一次

您真的不想像这样摆弄定位

您只需将

.image

设置为

显示：内联块

，然后将其置于小时和分钟之间：

.image{
    width:30px;
    height:90px; 
    background-image: url("2dots.png");
    background-repeat: no-repeat;
    background-size:50%;
}

12:30
（正常冒号：）

甚至更好，在

#hours

上的

伪元素之后使用
：并将图像用作背景。更具语义，并在CSS中保持“样式化”。我建议使用
：在
之后，但使用CSS，而不是背景图像。
<div id="time">
    <span id="hours">12</span>
    <div class="image"></div>
    <span id="minutes">30</span>
</div>