Когда я пытаюсь повторить 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>

Answer 1

Это потому, что ваш имидж слишком велик.Откройте его и отметьте https://www.w3schools.com/css/img_navsprites.gif

Вы можете установить атрибут background-size с обычными background-position-x и background-position-y, и ваше изображение повторится