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

Question

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

图片精灵的宽度为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>

Answer 1

这是因为你的图像太大了。打开查看https://www.w3schools.com/css/img_navsprites.gif

您可以将属性background-size 设置为普通的background-position-x 和background-position-y，并且您的图像会重复