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，然后图像会重复出现

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

1 个答案: