当我尝试重复x一个图像精灵时，它会显示整个图像

Question

我试图从这张图片（pic 1）重复这一部分（pic 2，这是箭头位）。但是，它不会重复图像的端口。它只显示整个图像。我该如何解决这个问题（并继续使用图像精灵）。

图像精灵的宽度是134px，高度是44px

body {
    padding: 0;
    margin: 0;
}

.test-box {
    position: relative;
    display: inline-block;
    width: auto;
    height: 14px;
    line-height: 14px;
    font-family: arial;
    font-size: 9px;
    color: #000;
    background: url("https://www.w3schools.com/css/img_navsprites.gif") -84px -18px repeat-x;
}

<div class="test-box">this is a text message</div>

如果我使用普通图像（不是图像精灵）那么它可以工作。但我想使用图像精灵。例如它工作时它不是图像精灵

body {
    padding: 0;
    margin: 0;
}

.test-box {
    position: relative;
    display: inline-block;
    width: auto;
    height: 14px;
    line-height: 14px;
    font-family: arial;
    font-size: 9px;
    color: #000;
    background: url("https://i.imgur.com/PhEZLTm.png") repeat-x;
}

<div class="test-box">this is a text message</div>